我需要显示自定义滚动条。我想尽可能避免使用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);
}
答案 0 :(得分:10)
如果浏览器确实支持工具栏元素的样式(=基于WebKit),实际上是可能的。虽然许多教程(例如this brilliant one)中没有提到它,但您可以使用background-url
属性来使用自定义图像而不是颜色。
例如,in this page我已将(使用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);
}
...瞧,我有一些青色卷轴。 )
答案 1 :(得分:3)
是的,你可以,但并不是每个浏览器都支持它。 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
据我所知,其他浏览器目前不支持此功能。
答案 2 :(得分:-1)