悬停在滚动条轨道上时显示滚动条

Question

我正在使用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); 
}

- IMUXIxD

Answer 1

编辑：此答案在当前浏览器中已不再有效

这只是简单地使用overflow-y属性，并在body:hover伪类中显示它。我还添加了一些填充，当鼠标悬停时会隐藏，以便文本在滚动条出现时不会改变位置，因为当滚动条隐藏时填充会占据那个空间。
Fiddle: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); 
}

- Kevin Pei

---

这在Firefox、Chrome或Edge中实际上已经不再起作用了。滚动条会混乱，并在移动到滚动条位置时翻转为隐藏、显示、隐藏、显示的状态。 - Frank Hale

@FrankHale 没错，我已经相应地更新了我的答案。好在我没有被标记为答案 :P - Kevin Pei

Answer 2

这里有一个jQuery的解决方案，因为您提到需要在悬停时显示它。 请查看fiddle。

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;
}

- trajce

---

有没有办法让滚动条更优雅地出现，比如淡入淡出的效果？ - IMUXIxD

你能不能做一下，我刚才看了一下，它仍然有些卡顿/没有渐变效果。 - IMUXIxD

抱歉，我正在尝试，但目前还无法工作。 - trajce

也许先添加类，隐藏类，然后淡入？ - IMUXIxD

我尝试了所有的方法，但都只能应用于主体部分，因此淡入或淡出效果将应用于整个页面，这是我认为不理想的。我正在尝试操纵-webkit类，但没有成功，我也尝试了CSS3过渡效果，但似乎它们在滚动条上不起作用。 - trajce