滚动条那些事

滚动条占位

浏览器滚动条（移动端通常不会占用）会占据实际的渲染空间，可以看到上图1中 outer 元素实际只有 284px 宽度，滚动条占据了约 16px 的宽度。

将 inner 和 outer 元素宽度设置为 300px，滚动条自然会遮挡住部分内容。

以下是示例：

点击“修复”按钮，会将问题修复，以下是按钮执行的代码

document.querySelector('.inner').style.width='100%';
document.querySelector('.outer').style.overflowY='auto'

滚动条hover显示

有一个需求是：在鼠标未悬浮在outer上时，不显示滚动条，鼠标悬浮时显示滚动条。

将“滚动条宽度”设置为none，就可以看到效果了。如果你已经点击过“修复”按钮，会发现 inner 内容会随着滚动条显示而压缩其宽度。（反而设置固定宽度就不会影响）

overlay

假设 outer 元素里面就是内容，没有嵌套其它元素，就会出现滚动条占位的问题了。

那么就要说到这个： overflow: overlay; 行为与 auto 相同，但是滚动条绘制在内容之上，而不是占据空间。

测试没有效果，被caniuse误导，实际已被弃用……

overflow: scroll 和 overflow: auto

设置了 overflow: scroll 后，不管需不需要滚动，滚动条都会默认显示。改成 overflow: auto 后，浏览器会自己判断是否需要显示。

滚动条宽度

scrollbar-width 属性可以设置滚动条的宽度，默认值为 auto，即浏览器默认的滚动条宽度。

滚动条颜色

scrollbar-color 属性可以设置滚动条的颜色，默认值为 auto

scrollbar-color: #beff00 #fff;：第一个颜色用于滑块，第二个颜色用于轨道。

自定义滚动条

使用 ::-webkit-scrollbar 可以自定义滚动条样式，包括滑块、轨道等。

该特性尚未标准化。我们不建议在生产环境中使用： https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* 滚动条滑块悬停 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}