javascript – 在滚动条轨道悬停时显示滚动条

2023年5月25日 212次阅读

我通过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

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