隐藏HTML页面上的滚动条

Question

隐藏HTML页面上的滚动条CSS可以用来隐藏滚动条吗？你会怎么做？

Answer 1

集overflow: hidden;尸体标签上这样的：

<style type="text/css">body {
    overflow:hidden;}</style>

上面的代码同时隐藏了水平滚动条和垂直滚动条。

如果你想藏起来只有垂直滚动条，使用overflow-y:

<style type="text/css">body {
    overflow-y:hidden;}</style>

如果你想藏起来只有水平滚动条，使用overflow-x:

<style type="text/css">body {
    overflow-x:hidden;}</style>

更新：我的意思是隐藏，抱歉，刚刚醒来：-)

---

注意：它还将禁用滚动功能。如果您只想隐藏滚动条，但不想滚动功能，请参阅下面的答案。

Answer 2

WebKit支持用标准CSS规则隐藏的滚动条伪元素：

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

如果希望隐藏所有滚动条，请使用

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

我不确定是否恢复-这确实奏效了，但也许有一个正确的方法：

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

你当然可以用width: 0，可以很容易地用width: auto，但我不喜欢滥用width为了能见度的调整。

更新：Firefox 64现在支持实验性的滚动条宽度属性默认情况下(63需要设置配置标志)。若要在FF 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这里指向我时所要寻找的，所以我想我还是会把它发出去的。)