隐藏滚动条

CSSCSSBeginner
立即练习

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技术,以改善可滚动元素上的用户体验。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/CodingStandardsandBestPracticesGroup(["`Coding Standards and Best Practices`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") css/CodingStandardsandBestPracticesGroup -.-> css/comments("`Comments`") subgraph Lab Skills css/selectors -.-> lab-35209{{"`隐藏滚动条`"}} css/width_and_height -.-> lab-35209{{"`隐藏滚动条`"}} css/display_property -.-> lab-35209{{"`隐藏滚动条`"}} css/pseudo_elements -.-> lab-35209{{"`隐藏滚动条`"}} css/comments -.-> lab-35209{{"`隐藏滚动条`"}} end

隐藏滚动条

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

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