css - 将滚动条隐藏在HTML页面上(Hiding the scroll bar on an HTML page)

Question

Can CSS be used to hide the scroll bar?

(可以使用CSS隐藏滚动条吗？)

How would you do this?

(你会怎么做？)

  ask by ANP translate from so

Answer 1

WebKit supports scrollbar pseudo elements that can be hidden with standard CSS rules:

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

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

If you want all scrollbars hidden, use

(如果要隐藏所有滚动条，请使用)

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

I'm not sure about restoring - this did work, but there might be a right way to do it:

(我不确定要还原-确实可以，但是可能有正确的方法：)

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

You can of course always use width: 0 , which can then be easily restored with width: auto , but I'm not a fan of abusing width for visibility tweaks.

(当然，您始终可以使用width: 0 ，然后可以使用width: auto轻松地恢复它，但是我不喜欢滥用width来进行可见性调整。)

Firefox 64 now supports the experimental scrollbar-width property by default (63 requires a configuration flag to be set).

(Firefox 64现在默认情况下支持实验性scrollbar-width属性 （63需要设置配置标志）。)

To hide the scrollbar in Firefox 64:

(要在Firefox 64中隐藏滚动条：)

#element {
    scrollbar-width: none;
}

To see if your current browser supports either the pseudo element or scrollbar-width , try this snippet:

(要查看您当前的浏览器是否支持伪元素或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> 

---

(Note that this is not really a correct answer to the question, because it hides the horizontal bars as well, but that's what I was looking for when Google pointed me here, so I figured I'd post it anyway.)

(（请注意，这并不是一个正确的答案，因为它也隐藏了水平条，但这就是我在Google指着我在这里时要寻找的东西，因此我认为我还是会发布它。）)