div+css制作滚动条,div中的CSS自定义滚动条

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

滚动条CSS支持

目前，不存在跨浏览器滚动条CSS样式定义.W3C文章我最后提到以下声明，并于最近更新(2014年10月10日)：一些浏览器(IE，Konqueror)支持非标准属性“滚动条-阴影-颜色”，“滚动条-跟踪-颜色”等。这些属性是非法的：它们既没有在任何CSS规范中定义，也没有标记为私有属性(通过在它们的前缀加上“-卖主-”)。

微软

正如其他人所提到的，微软支持滚动条样式，但只支持IE8和更高版本。

例子：

.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现在有了自己的版本：/* pseudo elements */::-webkit-scrollbar              {  }::-webkit-scrollbar-button

{  }::-webkit-scrollbar-track

{  }::-webkit-scrollbar-track-piece  {  }::-webkit-scrollbar-thumb

{  }::-webkit-scrollbar-corner       {  }::-webkit-resizer

{  }/* pseudo class selectors */:horizontal:vertical:decrement:increment:start:end

:double-button:single-button:no-button:corner-present:window-inactive

火狐(壁虎)

从64版起，Firefox支持通过属性进行滚动条样式设置scrollbar-color(部分，W3C草案)和scrollbar-width (W3C草案)。有关实现的一些良好信息可在这个答案.

跨浏览器滚动条样式

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

名单可能会继续下去。你最好的选择是四处寻找、研究和测试可用的解决方案。我相信你会找到适合你需要的东西。

防止非法卷轴条造型

以防你想防止滚动条的样式没有正确的前缀“-卖主”，这篇在w3c上发表的文章提供了一些基本说明。..基本上，您需要将以下CSS添加到与浏览器关联的用户样式表中。这些定义将覆盖您访问的任何页面上的无效滚动条样式。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;}

重复或类似的问题/资料来源

注：这个答案包含了来自不同来源的信息。如果使用了源，那么它在这个答案中也是链接的。