乐闻世界logo
搜索文章和话题

如何使用 css 自定义 DIV 的滚动条？

CSS

4个答案

1
2
3
4

在 CSS 中，我们可以使用伪元素和伪类来自定义 HTML 元素的滚动条样式。对于一个 div 元素，我们可以通过针对 ::-webkit-scrollbar 及其相关伪元素来设置样式，这样可以允许我们控制滚动条的不同部分，比如滚动条本身、滚动条轨道和滚动条的滑块（thumb）。

这里是一个简单的例子，展示了如何自定义一个 div 的滚动条：

css
/* 选择器指向 div 的滚动条 */
div::-webkit-scrollbar {
  width: 12px; /* 设置滚动条宽度 */
  background-color: #F5F5F5; /* 设置滚动条的背景颜色 */
}

/* 滚动条轨道 */
div::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; /* 在轨道内部加阴影效果 */
  border-radius: 10px; /* 设置轨道的圆角 */
}

/* 滚动条的滑块 */
div::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 10px; /* 滑块圆角 */
}

/* 滑块悬浮效果 */
div::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬浮时的颜色变化 */
}

在上面的例子中，div 元素的滚动条宽度被设置为12像素，并且有一个灰色的背景。滚动条轨道有一个内部阴影和圆角，而滚动条的滑块则有不同的背景色和圆角。当鼠标悬停在滑块上时，滑块的颜色会变成更深的灰色。

需要注意的是这些样式主要适用于基于 WebKit 的浏览器，如 Chrome、Safari 等。对于其他浏览器，比如 Firefox，你需要使用不同的伪元素 scrollbar-width 和 scrollbar-color：

css
/* Firefox 的滚动条样式 */
div {
  scrollbar-width: thin; /* 可以是 'auto', 'thin', 'none' */
  scrollbar-color: #888 #F5F5F5; /* 滑块颜色 和 轨道颜色 */
}

在实际项目中，考虑到不同浏览器的兼容性，我们可能需要结合使用前面提到的 WebKit 特定选择器和适用于其他浏览器的 CSS 属性来确保尽可能多的用户可以看到自定义的滚动条样式。

最后，随着 Web 标准的不断发展，自定义滚动条的方法可能会随着时间而发展变化，所以在实际应用中，我们需要参考最新的 CSS 标准和不同浏览器的支持情况。

2024年6月29日 12:07 回复

我认为整合有关滚动条、CSS 和浏览器兼容性的最新信息会很有帮助。

滚动条 CSS 支持

目前，不存在跨浏览器滚动条 CSS 样式定义。我在最后提到的W3C 文章有以下声明，并且最近更新了（2014 年 10 月 10 日）：

某些浏览器（IE、Konqueror）支持非标准属性“scrollbar-shadow-color”、“scrollbar-track-color”等。这些属性是非法的：它们既没有在任何 CSS 规范中定义，也没有标记为专有（通过在它们前面加上“-vendor-”前缀）

微软

正如其他人提到的，微软支持滚动条样式，但仅适用于 IE8 及更高版本。

例子：

shell
.TA {
    scrollbar-3dlight-color:gold;
    scrollbar-arrow-color:blue;
    scrollbar-base-color:;
    scrollbar-darkshadow-color:blue;
    scrollbar-face-color:;
    scrollbar-highlight-color:;
    scrollbar-shadow-color:
}

Chrome 和 Safari (WebKit)

同样，WebKit 现在也有自己的版本：

火狐（壁虎）

从版本 64 开始，Firefox 通过属性scrollbar-color（部分为W3C 草案）和scrollbar-width（W3C 草案）支持滚动条样式。有关实施的一些有用信息可以在此答案中找到。

跨浏览器滚动条样式

JavaScript 库和插件可以提供跨浏览器解决方案。有很多选择。

这份名单可以继续使用。最好的选择是搜索、研究和测试可用的解决方案。我相信您一定能找到适合您需求的东西。

防止非法滚动条样式

万一您想阻止未正确添加“-vendor”前缀的滚动条样式，W3C 上的这篇文章提供了一些基本说明。基本上，您需要将以下 CSS 添加到与您的浏览器关联的用户样式表中。这些定义将覆盖您访问的任何页面上无效的滚动条样式。

shell
body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

重复或类似的问题/上面未链接的来源

**注意：**此答案包含来自各种来源的信息。如果使用了来源，那么它也会在此答案中链接。

2024年6月29日 12:07 回复

请检查此链接：
CSS 滚动条

工作演示示例

shell
    #style-1::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    
    #style-1::-webkit-scrollbar
    {
        width: 12px;
        background-color: #F5F5F5;
    }
    
    #style-1::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }
2024年6月29日 12:07 回复

CSS 无法实现自定义滚动条，您需要一些 JavaScript 魔法。

某些浏览器支持非规范 CSS 规则，例如::-webkit-scrollbar在 Webkit 中，但并不理想，因为它只能在 Webkit 中工作。 IE 也有类似的东西，但我认为他们不再支持它了。

2024年6月29日 12:07 回复

你的答案