[分享]css中 超出显示滚动条

CSS中超出显示滚动条，是一种常用的布局方式，它可以帮助我们在显示较长的内容时，将内容放在固定的区域内，并为其添加滚动条。这种方式可以让我们的页面更加美观和易读，也能够提高页面的交互性和用户体验。 我...

CSS中超出显示滚动条，是一种常用的布局方式，它可以帮助我们在显示较长的内容时，将内容放在固定的区域内，并为其添加滚动条。这种方式可以让我们的页面更加美观和易读，也能够提高页面的交互性和用户体验。
我们可以通过以下代码来实现这种效果：

/* 设置区域大小和滚动条样式 */
.element {
  width: 300px;
  height: 200px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #000 #fff;
}
<br>
/* 自定义滚动条的样式 */
.element::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
<br>
.element::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 3px;
}
<br>
.element::-webkit-scrollbar-track {
  background-color: #fff;
} 

上面的代码中，我们定义了一个名为 element 的区域，它的宽度为 300px，高度为 200px，然后设置了 overflow 属性为 auto，这个关键字的意思是当内容超过区域大小时，会自动添加滚动条。我们还可以通过 scrollbar-width 属性来设置滚动条的宽度，通过 scrollbar-color 属性来设置滚动条的颜色。
接下来，我们使用伪元素来自定义滚动条的样式。-webkit-scrollbar 用来定义整个滚动条的大小和位置，-webkit-scrollbar-thumb 用来定义滚动条的滑块，-webkit-scrollbar-track 用来定义滚动条的轨道。我们可以为这些元素设定宽度、高度、背景色等样式。
通过以上的代码，我们便可以在页面中实现了一个超出显示滚动条的效果。除了上述代码，我们还可以使用其他方式，例如使用 JavaScript 来控制元素的滚动条，或者利用浏览器自带的 overflow-x 和 overflow-y 属性来控制水平和垂直方向的滚动条等。当然，具体需要根据实际情况来选择合适的方式。