在Mac OS X上强制显示Firefox的滚动条

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滚动条？

- Boschman

---

很遗憾，目前在FF中无法实现此功能。请参见：https://bugzilla.mozilla.org/show_bug.cgi?id=77790 解决方法是使用重新实现本地行为的JavaScript滚动条。请记住，浏览器尊重OSX中设置的用户偏好，并且用户已经习惯在出现溢出的区域中滚动。 - Kerry Liu

设计页面时，需要注意的一点是要确保在内容超出页面尺寸时实际上看起来像是有溢出。现在很多网站使用“堆叠屏幕”设计，你可以向下滚动并看到不同的屏幕或“页面” - 但是如果你没有注意到短小的滚动条，并且“折叠点”恰好在下一个屏幕的开头上方，那么就没有任何指示表明还有更多的内容。以 frontporch.io 为例（截至2013年10月14日）。 - JD Smith

这里的问题是什么？您想强制显示滚动条吗？还是想自定义滚动条的外观？ - yunzen

Webkit在Firefox中不起作用吗？ - Sudharsun

Answer 1

正如用户thirtydot在另一个问题中解释的那样，在Firefox中没有办法像在Chrome中一样自定义滚动条。

而且，没有办法“强制” Firefox 渲染旧式滚动条，因为系统默认的滚动条是由操作系统自己预定义的(请注意，您可以在系统偏好设置中修改要使用的滚动条)。

换句话说，只有通过JavaScript插件（例如jScrollPane等）才能实现自定义滚动条，直到Firefox支持本地自定义滚动条。

- Claudio Holanda

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>

- Confidant

---

很遗憾，我无法让您的解决方案正常工作。在我的Mac上，Firefox默认没有可见的滚动条。我使用您的解决方案创建了一个jsfiddle：http://jsfiddle.net/o92gdd9y/我做错了什么？ - Boschman

它确实可以工作，但脚本假定垂直滚动。您的div假定水平滚动。因此，您需要不断更新scrollLeft，如下所示：http://jsfiddle.net/o92gdd9y/2/（这是有效的，但是它是一个hack）。 - Blaise

这种方法很容易引发麻烦。你必须处理所有触发滚动的本地手势（包括未来的手势），以及可能出现的奇怪副作用，比如闪烁，可能会让用户感到困惑。 - undefined

Answer 3

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

- Fernando Camargo

---

为什么这个方法比其他方法更有效？通常用另一个问题来回答一个问题是不太好的方式。如果您知道为什么这个方法有效，那就通过解释它如何起作用来给出真正的答案。如果您不知道为什么这个方法有效，请等到您有足够的声望来评论，然后进行评论。 - Heretic Monkey

Answer 4

实际的答案是前往“系统偏好设置”-“通用”选项卡，将“显示滚动条”设置为“始终”。

- user16628429