问答一下,轻松解决,电脑应用解决专家!
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win10/Win11
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascriptLinux系统
PHP教程CSS教程XML教程

CSS隐藏滚动条并可以滚动内容

更新时间:2021-10-12 10:16 作者:Too_sober点击:

隐藏滚动条常用方法

   .container::-webkit-scrollbar {display:none}

为了兼容其他的浏览器,可以用这样的方法:

在滚动区域外再套一层div,给这层div设置overflow: hidden,即可隐藏滚动条

//给container外层加一个div(container-wrapper)
 
.container-wrapper{overflow: hidden}

可是,经过我的测试,这个方法虽然兼容了其他的浏览器,但是移动端我发现用微信打开这个页面,依旧存在一个很丑的默认样式的滚动条。

这种情况下,可以给container设置一个padding-bottom(根据滚动条的位置来设置,我的container是overflow-x: scroll),把滚动条挤出可视范围,这样在视觉上相当于把滚动条隐藏起来了

.container{
    overflow-x: scroll;
    overflow-y: hidden;
    /*解决ios上滑动不流畅*/
    -webkit-overflow-scrolling: touch;
    padding-bottom: 25px;
}
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容