使用 CSS 自定义滚动条样式

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何使用 CSS 自定义滚动条样式。我们将使用 ::-webkit-scrollbar 属性来设置滚动条的样式,包括滚动条轨道和滑块。完成本实验后,你将更好地理解如何创建自定义滚动条并提升网站的用户体验。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") subgraph Lab Skills css/selectors -.-> lab-35187{{"`使用 CSS 自定义滚动条样式`"}} css/colors -.-> lab-35187{{"`使用 CSS 自定义滚动条样式`"}} css/borders -.-> lab-35187{{"`使用 CSS 自定义滚动条样式`"}} css/width_and_height -.-> lab-35187{{"`使用 CSS 自定义滚动条样式`"}} css/backgrounds -.-> lab-35187{{"`使用 CSS 自定义滚动条样式`"}} css/pseudo_elements -.-> lab-35187{{"`使用 CSS 自定义滚动条样式`"}} end

自定义滚动条

虚拟机中已经提供了 index.htmlstyle.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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程