简介
在本实验中,我们将探讨如何在一个元素上隐藏滚动条,同时仍允许其使用CSS进行滚动。我们将使用 overflow: auto
属性来启用滚动,并使用 scrollbar-width: none
来在Firefox上隐藏滚动条,以及在 ::-webkit-scrollbar
伪元素上使用 display: none
来在WebKit浏览器上隐藏滚动条。本实验将提供一个实践经验,用于实现这种CSS技术,以改善可滚动元素上的用户体验。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将探讨如何在一个元素上隐藏滚动条,同时仍允许其使用CSS进行滚动。我们将使用 overflow: auto
属性来启用滚动,并使用 scrollbar-width: none
来在Firefox上隐藏滚动条,以及在 ::-webkit-scrollbar
伪元素上使用 display: none
来在WebKit浏览器上隐藏滚动条。本实验将提供一个实践经验,用于实现这种CSS技术,以改善可滚动元素上的用户体验。
虚拟机中已经提供了 index.html
和 style.css
。
若要在隐藏滚动条的同时使元素可滚动,请执行以下步骤:
overflow: auto
使元素能够滚动。scrollbar-width: none
在Firefox上隐藏滚动条。::-webkit-scrollbar
伪元素上使用 display: none
来隐藏WebKit浏览器(如Chrome、Edge和Safari)上的滚动条。以下是一个示例实现:
<div class="scrollable">
<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>
.scrollable {
width: 200px;
height: 100px;
overflow: auto;
scrollbar-width: none;
}
/* Hide scrollbars on WebKit browsers */
.scrollable::-webkit-scrollbar {
display: none;
}
请点击右下角的“Go Live”以在端口8080上运行网络服务。然后,你可以刷新“Web 8080”标签页来预览网页。
恭喜你!你已经完成了“隐藏滚动条”实验。你可以在LabEx中练习更多实验来提升你的技能。