使用 CSS 隐藏滚动条，如果直接使用 overflow: hidden 会导致内容不能滚动，要想使用 css 隐藏滚动条，但不影响内容滚动，这里有两种方法：
使用 padding 把滚动条移出浏览器视口。
使用 ::webkit-scrollbar 伪元素选择器（简单，但兼容性不好）。
下面分别来看一下这两种方法。
使用 padding
使用 css padding 来隐藏滚动条的原理是，把右侧 padding 间距设置为和操作系统滚动条宽度一样的数值，把滚动条挤出浏览器外，这样滚动条就不会出现在浏览器右侧了，并且也不会影响内容滚动。
例如，下面这段代码，main 元素为滚动容器，section 为滚动的元素：
要隐藏滚动条，
我们先把 body 的滚动条隐藏，这样就不会有横向的滚动条了。
然后把 main 元素的 overflow-y 设置为 scroll，让它可以垂直滚动。
再把 main 元素的右侧间距 padding-right 设置为滚动条的宽度，这个根据操作系统会有不同，windows 下数值大一些。
body { overflow: hidden;}main { width: 100vw; height: 100vh; overflow-y: scroll; padding-right: 7px;}section { width: 100%; height: 100%;}
这样就实现了隐藏滚动条。
使用 ::webkit-scrollbar
第 2 种方式是使用 ::webkit-scrollbar 伪元素选择器，不过这个选择器只在 webkit 核心的浏览器中有效，例如 Chrome、新 Edge、Safari 等。::web-kit-scrollbar 可以直接选择滚动条元素，把它的 display 属性设置为 none 就可以隐藏滚动条了：
::-webkit-scrollbar { display: none;}main { width: 100vw; height: 100vh;}section { width: 100%; height: 100%;}
可以看到这两种效果是一样的。
小结
好了，这个就是使用 CSS 隐藏滚动条的两种方式，你学会了吗？有帮助的话请记得收藏，或者分享到自己的微信上哦！