WebKit 支持用标准 CSS 规则隐藏的滚动条伪元素:
#element::-webkit-scrollbar {
display: none;
}
如果要隐藏所有滚动条,请使用:
::-webkit-scrollbar {
display: none;
}
我不确定是否要还原 - 确实可以,但是可能有正确的方法:
::-webkit-scrollbar {
display: block;
}
当然,您可以始终使用 width: 0
,然后可以使用 width: auto
轻松地恢复它,但是我不喜欢滥用 width
来进行可见性调整。
Firefox 64 现在默认支持实验性的滚动条宽度属性 (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>
(请注意,这并不是对这个问题的正确答案,因为它也隐藏了水平条。)