在隐藏滚动条的同时,还需要支持滚动。 我们经常在前端开发中遇到这种情况。 最容易想到的是添加iscroll插件,其实现在在CSS上也可以实现这个功能。 我已经在很多地方使用了。 让我们一起来看看这三种方法。
方法1 :计算并隐藏滚动条的宽度
在本站的边栏中,前台日报的内容没有滚动条,但移动鼠标时内容会滚动。 这是什么技术? 其实我只是用定位隐藏了滚动条。
divclass=’ outer-container ‘ divclass=’ inner-container ‘ ./div/div.outer-container { width 3360360 px; height: 200px; 定位:关系; overflow :隐藏; }.inner-container { position : absolute; left: 0; top: 0; right: -17px; bottom: 0; overflow-x: hidden; overflow-y: scroll; }该代码巧妙地向右移动17个像素,正好等于滚动条的宽度。 这个值是我手动调试的。 在chrome和IE上没有发现问题
方法2 :用三个容器包围,而不计算滚动条的宽度
这个代码最初是在Microsoft的博客上看到的。 和我的想法一样,在人群中又增加了一个箱子,把内容限制在箱子里。 即使看不到滚动条也可以滚动。 代码如下所示。
divclass=’ outer-container ‘ divclass=’ inner-container ‘ divclass=’ content ‘ ./div/div/div.element, ous }.outer-container { border :5 pxsolidpurple; 定位:关系; overflow :隐藏; }.inner-container { position : absolute; left: 0; overflow-x: hidden; overflow-y: scroll; }.inner-container :3360-WebKit-scroll bar { display : none; }方法3:css隐藏滚动条
另外,本文还共享了在CSS中隐藏滚动条的方法,但该方法与IE不兼容,移动端也可以使用。 它是自定义滚动条伪对象选择器:-webkit-scrollbar。 详情请参阅以前的报道。 CSS3自定义webkit滚动条样式chrome和Safari
. element :3360-WebKit-scroll bar { width : important }//ie10.element {-ms-overflow-style : none; //Firefox.element { overflow :-moz-scroll bars-none; }