3

我需要显示一个自定义滚动条。如果可能，我想避免使用 jQuery 插件。那么我可以用 HTML5 和 CSS3 做这样的事情吗？：

.myScrollableBox {
  width: 200px;
  height: 500px;

  /* Display scrollbar if content is bigger than the box */
  overflow: auto;

  /* This doesn't work, but can I do something similar? */
  scrollbar-image: url(/images/myscrollbar.png); 
}
4

3 回答 3

12

如果浏览器确实支持工具栏元素的样式（= 基于 WebKit），这实际上是可能的。尽管在很多教程中都没有提到它（例如这个很棒的教程），但您可以只使用background-url属性来使用自定义图像而不是颜色。

例如，在此页面中，我已将（在 Chrome 开发人员工具中）样式更改为...

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: url('http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/header-demos.jpg');
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

...瞧，我有一些氰化物卷轴。)

于 2012-10-04T12:49:36.613 回答
4

是的，您可以，但并非所有浏览器都支持它。Webkit（Chrome 等）使用 css 对此提供支持：

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

阅读更多：https ://www.webkit.org/blog/363/styling-scrollbars/

在 Internet Explorer 中，您可以使用 css，如 scrollbar-face-color或-ms-scrollbar-face-color

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

阅读更多：http: //msdn.microsoft.com/en-us/library/ie/hh772048%28v=vs.85%29.aspx

据我所知，目前其他浏览器不支持此功能。

于 2012-10-04T12:48:57.597 回答
-3

不，那是不可能的。浏览器使用的滚动条不是放置在 html 页面内的图像。它是浏览器逻辑的一部分。你不能简单地替换它。

于 2012-10-04T12:38:55.470 回答