CSS自定义overflow的滚动条

1. 实现代码

为了使overflow具有效果，块级水平的容器必须有一个设定的高度，或white-space设置为nowrap。自定义滚动条的过程中如果发现加了width后x轴的滚动条还是很粗，可以加个height试试。

1.1 css代码

<style>
  .box {
    width: 300px;
    height: 400px;
    overflow: auto;
  }
  .box::-webkit-scrollbar {
    width: 6px;
    height: 6px; /* 如果加了width后x轴的还是很粗，加个height */
  }
  .box::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #c2c2c2;
  }
</style>

1.2 html代码

<div class="box"> 这里放好多好多字试试 </div>

2. 基础知识储备-overflow属性

2.1 值

• visible(默认)
  内容不能被裁剪且可能会渲染到padding外部

• hidden:
  如果需要，内容将被裁减以适应padding盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置scrollLeft等属性的值或scrollTo()方法，因此该元素仍然是一个滚动的容器。

• clip:
  类似hidden，但是禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果希望开启一个新的格式化上下文，可以使用display: flow-root来这样做。

• scroll:
  如果需要，内容将被裁减以适应padding盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容

• auto
  如果内容不溢出，没有滚动条，如果内容溢出，则有滚动条。

• overlay
  行为与auto相同，但是滚动条绘制在内容之上，而不是占据空间

2.2 适用性

• 适用元素：Block-containers, flex containers, grid containers
• 是否继承属性：否

3. 基础知识储备 ::-webkit-scrollbar

仅在基于Blink或Webkit的浏览器（例如Chrome, Edge, Opera, Safari, IOS上的所有浏览器，以及其它基于Webkit的浏览器）上可用。Firefox浏览器不支持）。

• ::-webkit-scrollbar——整个滚动条
• ::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
• ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
• ::-webkit-scrollbar-track——滚动条轨道
• ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分
• ::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角
• ::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块