4

我通过 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); 
}
4

2 回答 2

1

编辑：此答案不再适用于当前浏览器

overflow-y使用该属性并使用body:hover伪类显示它是一件简单的事情。我还添加了一些将在悬停时隐藏的填充，因此当滚动条显示为填充时，文本不会改变位置，当滚动条被隐藏时，填充占据了该空间。
小提琴： http: //jsfiddle.net/J4gc9/1
CSS：

::-webkit-scrollbar {
    width: 12px;
}
body{
    overflow-y:hidden;
    padding-right:12px;
}
body:hover{
    overflow-y:scroll;
    padding-right:0px;
}
/* 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); 
}
于 2013-04-06T00:05:05.000 回答
1

这是一个 jquery 解决方案，因为您提到它，当您将鼠标悬停在它上面时需要它显示。检查这个小提琴

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;
}
于 2013-04-06T00:09:46.997 回答