隐藏滚动条
隐藏元素上的滚动条,同时仍然允许其可滚动。
- 使用
overflow: auto
允许元素可滚动。 - 使用
scrollbar-width: none
在 Firefox 上隐藏滚动条。 - 使用
display: none
在 WebKit 浏览器(Chrome、Edge、Safari)上隐藏滚动条的::-webkit-scrollbar
伪元素。
<div class="no-scrollbars">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum id leo a consectetur. Integer justo magna, ultricies vel enim vitae, egestas efficitur leo. Ut nulla orci, rutrum eu augue sed, tempus pellentesque quam.</p>
</div>
div {
width: 200px;
height: 100px;
}
.no-scrollbars {
overflow: auto;
scrollbar-width: none;
}
.no-scrollbars::-webkit-scrollbar {
display: none;
}