CSS 如何隐藏滚动条，但不影响内容滚动

使用 CSS 隐藏滚动条，如果直接使用 overflow: hidden 会导致内容不能滚动，要想使用 css 隐藏滚动条，但不影响内容滚动，这里有两种方法：

• 使用 padding 把滚动条移出浏览器视口。
• 使用 ::webkit-scrollbar 伪元素选择器（简单，但兼容性不好）。

下面分别来看一下这两种方法。

使用 padding

使用 css padding 来隐藏滚动条的原理是，把右侧 padding 间距设置为和操作系统滚动条宽度一样的数值，把滚动条挤出浏览器外，这样滚动条就不会出现在浏览器右侧了，并且也不会影响内容滚动。

例如，下面这段代码，main 元素为滚动容器，section 为滚动的元素：

<main>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
</main>

要隐藏滚动条，

• 我们先把 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 隐藏滚动条的两种方式，你学会了吗？有帮助的话请记得收藏，或者分享到自己的微信上哦！