统一设置页面滚动条的宽度

2024年8月19日 · 阅读需 3 分钟

要统一设置 body 里面所有元素的滚动条宽度为 thin，我们需要使用一个组合方法来确保在不同的浏览器中都能实现这个效果。以下是实现这一目标的 CSS 代码：

/* 针对 WebKit 浏览器（Chrome、Safari 等） */
body ::-webkit-scrollbar {
  width: thin; /* 设置滚动条宽度为细 */
}

/* 针对 Firefox */
* {
  scrollbar-width: thin;
}

/* 针对 IE 和 Edge 的旧版本 */
body {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

这段代码的解释：

WebKit 浏览器部分：
- body ::-webkit-scrollbar 选择器会应用到 body 内所有元素的滚动条。
- width: thin 将滚动条宽度设置为细。在 WebKit 浏览器中，"thin" 通常等同于大约 6 像素宽。
Firefox 部分：
- 使用通用选择器 * 来选择所有元素。
- scrollbar-width: thin 在 Firefox 中将所有滚动条设置为细。
IE 和旧版 Edge 部分：
- -ms-overflow-style: -ms-autohiding-scrollbar 不会让滚动条变细，但会使它们自动隐藏，这在某种程度上达到了类似的视觉效果。

注意事项：

这个设置会影响 body 内所有带有滚动条的元素，包括 <textarea>、带有 overflow: auto 或 overflow: scroll 的 <div> 等。
"thin" 的具体宽度可能在不同浏览器之间略有差异。
对于不支持这些属性的浏览器，将会显示默认的滚动条样式。
如果你想要更精确的控制，可以在 WebKit 部分使用具体的像素值，例如 width: 6px; 代替 width: thin;。

如果你还想customized进一步控制滚动条的外观（比如颜色），可以添加以下代码：

/* 针对 WebKit 浏览器的滚动条样式 */
body ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); /* 滚动条滑块颜色 */
  border-radius: 4px; /* 滚动条滑块圆角 */
}

body ::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1); /* 滚动条轨道颜色 */
}

/* 针对 Firefox 的滚动条颜色 */
* {
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1); /* 滑块颜色 轨道颜色 */
}

这些额外的样式会给滚动条一个更现代、更精致的外观。记住，滚动条的样式在不同浏览器中可能会有些许差异，但这个方法应该能在大多数现代浏览器中提供一个相对一致的细滚动条效果。

注意

上面代码，会影响浏览器右侧的主滚动条；如果想排除右侧主滚动条，需要以下代码：

/* 针对页面内部元素的滚动条 */
body *:not(html)::-webkit-scrollbar {
  width: thin; /* 设置滚动条宽度为细 */
}

/* 针对 Firefox */
body *:not(html) {
  scrollbar-width: thin;
}

这段代码的解释:

我们使用 body *:not(html) 选择器来针对 body 内的所有元素,但排除了 <html> 元素。这样可以确保不会影响到浏览器窗口的主滚动条。
对于 WebKit 浏览器(Chrome、Safari 等),我们使用 ::-webkit-scrollbar 伪元素来设置滚动条的宽度为 "thin"。
对于 Firefox,我们使用 scrollbar-width 属性来设置滚动条宽度为 "thin"。

这样设置后,页面内的可滚动元素(如 div 或 textarea 等)会显示细滚动条,而浏览器窗口右侧的主滚动条将保持默认样式不变。