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

Posted 2023-03-06

【中文标题】在 Mac OS X 上的 Firefox 中强制可见滚动条

【英文标题】：Force visible scrollbar in Firefox on Mac OS X

【发布时间】：2013-08-21 11:25:41

【问题描述】：

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

【问题讨论】：

不幸的是，目前这在 FF 中是不可能的。请参阅：bugzilla.mozilla.org/show_bug.cgi?id=77790 解决方法是使用重新实现本机行为的 javascript 滚动条。请记住，浏览器尊重 OSX 中的user preferences 设置，并且用户已经接受过在似乎溢出的区域进行滚动的培训。

要注意的一件事是设计您的页面时，它实际上看起来确实有溢出。我现在看到许多使用“堆叠屏幕”作为设计的网站，您向下滚动并不断看到不同的屏幕或“页面” - 但是如果您没有注意到短滚动条，并且“折叠”恰好在上面下一个屏幕的开始，没有任何迹象表明存在更多内容。以frontporch.io 为例（截至 2013 年 10 月 14 日）

这里的问题是什么？你想强制滚动条的可见性吗？还是要自定义滚动条的外观？

webkit 不能在 firefox 中工作

【参考方案1】：

在另一个问题中，作为用户三十点 explained，无法像在 Chrome 中那样自定义 Firefox 中的滚动条。

此外，由于系统中使用的默认滚动条由操作系统本身预定义 （请注意，您可以在系统偏好设置中修改你想要的滚动条）。

换句话说，在 Firefox 支持原生自定义滚动条之前，只有 jScrollPane 等 JavaScript 插件才有可能。

【参考方案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>

【讨论】：

很遗憾，我无法让您的解决方案发挥作用。默认情况下，我的 Mac 上的 Firefox 中没有可见的滚动条。我用你的解决方案创建了一个 jsfiddle：jsfiddle.net/o92gdd9y我做错了什么？

它确实有效，但脚本假设垂直滚动。您的 div 假设水平滚动。所以你需要像这样不断更新scrollLeft：jsfiddle.net/o92gdd9y/2（有效，但它是一个黑客）

【参考方案3】：

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

【讨论】：

为什么这对其他任何东西都有效？一般来说，用另一个问题回答一个问题不是好的形式。如果您知道这是可行的，请通过解释它的帮助来使其成为真正的答案。如果您不知道这可行，请等到您有足够的代表发表评论，然后再发表评论。

【参考方案4】：

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