[分享]css不显示滚动条但能滚动

CSS 是网页设计中必不可少的一部分，它控制着网页的外观和布局。有时候我们需要设置一个区域不显示滚动条，但是用户仍然可以通过鼠标滚轮或者触摸来滚动内容。下面我们就来具体讲一下如何实现这个效果。div ...

CSS 是网页设计中必不可少的一部分，它控制着网页的外观和布局。有时候我们需要设置一个区域不显示滚动条，但是用户仍然可以通过鼠标滚轮或者触摸来滚动内容。下面我们就来具体讲一下如何实现这个效果。

div {
  width: 300px;
  height: 200px;
  overflow: scroll;
  -ms-overflow-style: none; /* IE11 */
  scrollbar-width: none; /* Firefox */
}

/* 隐藏滚动条 */
div::-webkit-scrollbar {
  display: none; /* Safari 和 Chrome */
} 

首先，我们需要一个 <div> 元素来包裹需要滚动的内容。然后设置它的宽度和高度，并且给它一个滚动条，这可以通过 CSS 中的 overflow 属性来实现。

但是这样会出现一个问题，不同浏览器的滚动条样式都不相同，有些滚动条看起来非常丑陋。为了解决这个问题，我们可以通过 CSS 中的一些特殊属性来隐藏滚动条，比如 -ms-overflow-style 和 scrollbar-width。但是这依然不能解决 Safari 和 Chrome 浏览器中滚动条的样式问题，因为它们的滚动条不是基于传统的 CSS 选择器而是使用伪元素。

针对 Safari 和 Chrome 浏览器的滚动条样式问题，我们可以使用伪元素和属性选择器来隐藏滚动条，这就是 ::-webkit-scrollbar 和 display:none 的组合。这样就可以完美地解决了滚动条的样式问题。

通过上述 CSS 设置，我们的滚动区域就能完美地隐藏滚动条而不影响用户实际操作，同时也保持了良好的用户体验和界面美观程度。