本文摘自PHP中文网,作者藏色散人,侵删。
div css实现隐藏滚动条的方法:1、计算滚动条宽度并隐藏起来;2、使用三个容器包围起来,不需要计算滚动条的宽度;3、自定义滚动条的伪对象选择器“::-webkit-scrollbar”。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
3种方法实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。
方法1:计算滚动条宽度并隐藏起来
在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容。这是什么技术呢? 其实我只是把滚动条通过定位把它隐藏了起来。 演示 下面给一个简化版的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
演示 这个代码巧妙的向右移动了17个像素,刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome和IE没发现问题。
方法2:使用三个容器包围起来,不需要计算滚动条的宽度
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者