它可以指定与HTML5滚动图像？(It is possible to specify the scr

我需要显示自定义滚动条。我想避免使用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); 
}

Answer 1:

它实际上是可能的，如果浏览器不支持工具栏元素的样式（=是基于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);
}

......瞧，我有一些cyanid滚轮。）

Answer 2:

是的，你可以，但它不是在每一个浏览器的支持。 Webkit的（铬等）对该使用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像滚动面颜色或-MS-滚动面颜色

-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

据我所知，其他浏览器不目前支持这一点。