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

2021年11月 · 预计阅读时间： 2 分钟

张旭乾

软件工程师 / B站UP主

使用 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%;
}

这样就实现了隐藏滚动条。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        padding: 0;
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      body {
        overflow: hidden;
      }

      main {
        width: 100vw;
        height: 100vh;
        overflow-y: scroll;
        padding-right: 7px;
      }

      section {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        font-size: 4em;
        color: white;
      }

      section:nth-child(1) {
        background: hsl(210, 100%, 20%);
      }
      section:nth-child(2) {
        background: hsl(250, 100%, 20%);
      }
      section:nth-child(3) {
        background: hsl(300, 100%, 20%);
      }
      section:nth-child(4) {
        background: hsl(350, 100%, 20%);
      }
    </style>
    <title>CSS 隐藏滚动条</title>
  </head>
  <body>
    <main>
      <section>1</section>
      <section>2</section>
      <section>3</section>
      <section>4</section>
    </main>
  </body>
</html>

使用 ::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%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        padding: 0;
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      ::-webkit-scrollbar {
        display: none;
      }

      main {
        width: 100vw;
        height: 100vh;
      }

      section {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        font-size: 4em;
        color: white;
      }

      section:nth-child(1) {
        background: hsl(210, 100%, 20%);
      }
      section:nth-child(2) {
        background: hsl(250, 100%, 20%);
      }
      section:nth-child(3) {
        background: hsl(300, 100%, 20%);
      }
      section:nth-child(4) {
        background: hsl(350, 100%, 20%);
      }
    </style>
    <title>CSS 隐藏滚动条</title>
  </head>
  <body>
    <main>
      <section>1</section>
      <section>2</section>
      <section>3</section>
      <section>4</section>
    </main>
  </body>
</html>

可以看到这两种效果是一样的。

小结

好了，这个就是使用 CSS 隐藏滚动条的两种方式，你学会了吗？有帮助的话请记得收藏，或者分享到自己的微信上哦！

使用 padding​

使用 ::webkit-scrollbar​

小结​

使用 padding

使用 ::webkit-scrollbar

小结