简介
在本实验中,我们将探索如何使用 CSS 自定义滚动条样式。我们将使用 ::-webkit-scrollbar
属性来设置滚动条的样式,包括滚动条轨道和滑块。完成本实验后,你将更好地理解如何创建自定义滚动条并提升网站的用户体验。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将探索如何使用 CSS 自定义滚动条样式。我们将使用 ::-webkit-scrollbar
属性来设置滚动条的样式,包括滚动条轨道和滑块。完成本实验后,你将更好地理解如何创建自定义滚动条并提升网站的用户体验。
虚拟机中已经提供了 index.html
和 style.css
。
要为具有可滚动溢出的元素自定义滚动条样式,你可以使用 ::-webkit-scrollbar
来设置滚动条元素的样式,使用 ::-webkit-scrollbar-track
来设置滚动条轨道(滚动条的背景)的样式,以及使用 ::-webkit-scrollbar-thumb
来设置滚动条滑块(可拖动的元素)的样式。不过请注意,此技术仅适用于基于 WebKit 的浏览器,并且滚动条样式不在任何标准轨道上。以下是在 HTML 和 CSS 中使用这些选择器的示例:
<div class="custom-scrollbar">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
Iure id exercitationem nulla qui repellat laborum vitae, <br />
molestias tempora velit natus. Quas, assumenda nisi. <br />
Quisquam enim qui iure, consequatur velit sit?
</p>
</div>
.custom-scrollbar {
height: 70px;
overflow-y: scroll;
}
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #1e3f20;
border-radius: 12px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #4a7856;
border-radius: 12px;
}
请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后,你可以刷新“Web 8080”标签页来预览网页。
恭喜你!你已经完成了“自定义滚动条”实验。你可以在 LabEx 中练习更多实验来提升你的技能。