Question

我正在构建一个需要大量定制的网站，我还想自定义滚动条的外观（即：颜色，宽度，样式等）。我目前不知道该怎么做。

老实说，我正在进行一个小组项目的铬实验，我还没有尝试过任何东西。任何解决方案，即使只对铬有帮助。

Answer 1

IE通过IE专有的非标准CSS属性支持这一点，例如：

scrollbar-base-color
scrollbar-face-color
scrollbar-track-color
scrollbar-3dlight-color
scrollbar-highlight-color
scrollbar-arrow-color
scrollbar-darkshadow-color
scrollbar-shadow-color

WebKit（Chrome和Safari）也support this使用：

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

WebKit的优点是滚动条可以具有不透明度，这使得外观非常漂亮。

据我所知，没有标准的Mozilla支持方式（虽然有一个open bug on this所以我们可以希望！）然而，有一些jQuery plugins创建了可滚动区域。您仍然无法在文档窗口本身获得自定义滚动条颜色。

IE示例：

<html>
<head>
  <style>
     BODY {scrollbar-base-color: #ff00ff;}
  </style>
</head>
<body>
   <div style="height: 5000px;">
   IE Test
   </div>
</body>
</html>

WebKit示例（Chrome / Safari）：

<html>
<head>
  <style>
    ::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.8); 
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.7); 
    }
  </style>
</head>
<body>
   <div style="height: 5000px;">
   WebKit Test
   </div>
</body>
</html>

Answer 2

在Internet Explorer中，您可以在CSS中使用scrollbar-base-color来更改滚动条的颜色。

其他浏览器可能支持也可能不支持，但它是非标准的。

对于所有其他浏览器，并且要影响实际外观（宽度，箭头样式等），你需要在JavaScript中编写自己的滚动条，这是一个可用性的噩梦 - 不要这样做！

自定义我的网页的滚动条

2 个答案: