好程序员web前端教程分享3种方法实现CSS隐藏滚动条并可以滚动内容

时间：2023-03-30 15:03:06 CSS

程序员web前端教程分享3种实现CSS隐藏滚动条和滚动内容滚动的方法，我们在前端开发中经常会遇到这种情况。最容易想到的就是加一个iscroll插件，但其实现在CSS也可以实现这个功能了。我在很多地方都用过。下面我们一起来看看这三种方法。方法一：计算滚动条的宽度，隐藏在本站的侧边栏中。可以看到前端日报的内容是没有滚动条的，但是鼠标移到上面可以滚动内容。这是什么技术？其实我只是通过定位隐藏了滚动条。下面是代码的简化版本......

.outer-container{width:360px;height:200px;position:relative;overflow:hidden;}.inner-container{position:absolute;left:0;top:0;right:-17px;bottom:0;overflow-x:hidden;overflow-y:scroll;}这段代码巧妙地向右移动了17个像素，刚好等于滚动条的宽度。该值是手动调试得到的。在chrome和IE中没有发现问题。方法二：用三个容器围起来，不需要计算框内滚动条的宽度。这样既看不到滚动条又可以滚动。代码如下：

......