Question

Firefox 24引入了Lion滚动条支持。这将在Mac OS X上显示Lion样式的滚动条。请参阅：https://wiki.mozilla.org/Lion_Scrollbars/Triage

这给我带来了一个问题：div上的滚动条现在默认隐藏了。有时我想强制显示滚动条。

对于WebKit，有一个很好的解决方案（在https://davidwalsh.name/osx-overflow中提到）：

::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
}

::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0,0,0,.5);
   -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

有人知道如何在Mac OS X上强制显示Firefox 24（及以上版本）中的可见滚动条吗？

是否有与webkit滚动条匹配的插件javascript滚动条？

Answer 1

在另一个问题中，作为用户thirtydot explained，无法在Chrome中自定义滚动条，就像在Chrome中一样。

此外，没有办法实际“强制”Firefox渲染旧式滚动条，因为系统中使用的默认滚动条是由操作系统本身预定义的 （请注意，您可以在“系统偏好设置”中修改所需的滚动条。

换句话说，在Firefox支持本机自定义滚动条之前，只能使用jScrollPane等类似的JavaScript插件。

Answer 2

这是一个解决方案，但你必须使用Javascript。基本上它运行一个循环，强制浏览器显示滚动条。

使用此CSS确保您的div设置为显示滚动条：

.mydiv{ overflow-y:auto; }

然后将此脚本附加到您的页面（这需要JQuery）。

<script type="text/JavaScript">
var sc;
jQuery(document).ready(function(){
    //constantly update the scroll position:
    sc=setInterval(scrollDown,200);

    //optional:stop the updating if it gets a click
    jQuery('.mydiv').mousedown(function(e){
        clearInterval(sc);            
    });
});
function scrollDown(){
    //find every div with class "mydiv" and apply the fix
    for(i=0;i<=jQuery('.mydiv').length;i++){
        try{
            var g=jQuery('.mydiv')[i];
            g.scrollTop+=1;
            g.scrollTop-=1;
        } catch(e){
            //eliminates errors when no scroll is needed
        }
    }
}
</script>

Answer 3

overflow: -moz-scrollbars-vertical怎么样？

Answer 4

对此的实际答案是转到系统偏好设置 - 常规选项卡 - 并将“显示滚动条”改为“始终”。

在Mac OS X上强制Firefox中的可见滚动条

4 个答案: