css - 隐藏 HTML 页面上的滚动条

Question

CSS可以用来隐藏滚动条吗？你会怎么做？

Answer 1

WebKit 支持可以使用标准 CSS 规则隐藏的滚动条伪元素:

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

如果你想隐藏所有的滚动条，使用

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

我不确定是否要恢复 - 这确实有效，但可能有正确的方法:

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

您当然可以始终使用 width: 0，然后可以使用 width: auto 轻松恢复，但我不喜欢滥用 宽度 用于可见性调整。

Firefox 64 现在支持实验性 scrollbar-width property默认情况下(63 需要设置配置标志)。在 Firefox 64 中隐藏滚动条:

#element {
    scrollbar-width: none;
}

要查看您当前的浏览器是否支持伪元素或 scrollbar-width，请尝试以下代码段:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

---

(请注意，这并不是问题的真正正确答案，因为它也隐藏了水平条，但当 Google 将我指向此处时，这正是我正在寻找的内容，所以我想我应该发布它无论如何。)