在隐藏滚动条的同时，还需要支持滚动。 我们经常在前端开发中遇到这种情况。 最容易想到的是添加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； }