0

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

老实说，我正在做一个小组项目 chrome 实验，我还没有尝试过任何东西。任何解决方案，即使只适用于 chrome 也会有所帮助。

4

2 回答 2

3

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）也支持这一点，使用：

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

WebKit 非常酷的一点是滚动条可以具有不透明度，这使得 UI 看起来非常漂亮。

据我所知，没有标准的 Mozilla 方法来支持这一点（尽管有一个开放的错误，所以我们希望如此！）但是，有一些jQuery 插件可以创建可滚动区域。您仍然不会在文档窗口本身上获得自定义滚动条颜色。

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>
于 2012-12-05T23:01:45.443 回答
0

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

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

对于所有其他浏览器，为了影响诸如实际外观（宽度、箭头样式等）之类的东西，您需要用 JavaScript 编写自己的滚动条，这是一个可用性噩梦 - 不要这样做！

于 2012-12-05T22:52:07.470 回答