我通过 CSS 使用自定义滚动条样式在 webkit 中实现自定义滚动条。如果其他浏览器已实现带前缀或不带前缀的版本/版本,请告诉我。
但是,关于我的问题。有没有办法让滚动条出现在滚动条轨道的悬停上?
有点像 Mac OS X Lion 和 Mountain Lion 吗?
这是我的自定义滚动条的 CSS”
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
这是一个 jquery 解决方案,因为您提到它需要它在您将鼠标悬停在其上时显示。
检查这个fiddle http://jsfiddle.net/HnHCb/1/
var bodywidth = $('body').width();
var scrollwidth = 10;
$('body').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
if(x>bodywidth-scrollwidth)
$('body').addClass("auto");
else
$('body').removeClass("auto");
});
body
{
margin:0;
overflow:hidden;
}
.auto
{
overflow:auto;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)