Javascript 使滚动条出现在滚动条轨迹的悬停位置

我通过CSS使用自定义滚动条样式在webkit中实现自定义滚动条。如果其他浏览器实现了前缀或非前缀版本/版本，请告诉我

---

但是，关于我的问题。有没有办法让滚动条出现在滚动条轨迹的悬停位置

有点像Mac OS X Lion和Mountain Lion

这是我的自定义滚动条CSS“

---

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

使用

overflow-y

属性并用

body:hover

伪类显示它很简单。我还添加了一些在hover上隐藏的填充，以便在滚动条显示时文本不会改变位置，因为滚动条隐藏时填充会占用该空间。
小提琴：
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); 
}

---

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

---

有没有一种方法可以让滚动条看起来更优雅，就像淡入一样？你能做到吗，我刚看了它，但它仍然是一个不稳定的过渡/不淡入。对不起，我现在正在尝试，但现在它不起作用。可能添加类，隐藏类，然后淡入？我尝试了所有这些，它适用于身体，所以淡入或淡出我试图操纵

-webkit

类，但没有成功，我也尝试过css3转换，但它们似乎在滚动条上不起作用。这实际上在Firefox、Chrome或Edge中都不起作用了。滚动条会变得混乱，并翻转到隐藏状态wn，隐藏，移动到滚动条位置时显示。@FrankHale你是对的。我已经相应地更新了我的答案。幸好我没有被标记为答案：P

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

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