是否可以使用HTML5指定滚动条图像? [英] It is possible to specify the scrollbar image with HTML5?
问题描述
我需要显示一个自定义滚动条.如果可能,我想避免使用jQuery插件.因此,我可以在HTML5&中使用类似的方法吗? CSS3? :
I need to display a custom scrollbar. I would like to avoid using a jQuery plugin if possible. So can I so something like this with 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);
}
推荐答案
如果浏览器确实支持工具栏 elements 的样式(=基于WebKit),则实际上是可行的.尽管许多教程中都没有提及它(例如,例如这本出色的书 ),您只需使用background-url
属性即可使用自定义图片而不是颜色.
It's actually possible, if browser does support styling of toolbar elements (= is based on WebKit). Although it's not mentioned in many tutorials (such as this brilliant one, for example), you can just use background-url
property to use custom image instead of color.
例如,此页面中的 我已经更改了样式(在Chrome开发者工具中)来...
For example, in this page I've changed (in Chrome Developer Tools) styling to...
::-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);
}
...还有瞧,我有一些氰化物卷轴. )
... and voila, I have some cyanid scroller. )
这篇关于是否可以使用HTML5指定滚动条图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!