可以使用HTML5指定滚动条图像吗？

Question

我需要显示自定义滚动条.我想尽可能避免使用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卷轴.)