2024年4月26日发(作者：)

CSS隐藏滚动条但还可以滚动

dadaV20200315

先上实例：

/*隐藏滚动条但可以滚动，达经典！*/

body{

border: 1px solid #000000;

overflow-x: hidden;

}

body::-webkit-scrollbar{

display: none;

}

滚动条的css样式主要有三部分组成：

1、::-webkit-scrollbar 定义了滚动条整体的样式；

2、::-webkit-scrollbar-thumb 滑块部分；

3、::-webkit-scrollbar-thumb 轨道部分；

下面以overflow-y:auto;为例（overflow-x:auto同）

更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？

使用overflow:hidden隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。

由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对

象选择器

::-webkit-scrollbar。

隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想

到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用

了，下面一起看看这三种方法。

方法1：计算滚动条宽度并隐藏起来

在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以

滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。