隐藏滚动条

隐藏元素上的滚动条,同时仍然允许其可滚动。

  • 使用 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;
}