FireFox滚动条 [英] FireFox scroll bar

问题描述

大家有没有办法在Firefox中自定义滚动条我尝试在chrome上使用类似的技术，但我想这只适用于chrome，经过一些研究我发现没有办法在Firefox上自定义它使用这种方法是因为引擎中存在错误，所以我正在寻找另一种干净的方法来实现它

  :: -moz-scrollbar {
宽度：12px; 
} 
 / *跟踪* / 
 
 ::  -  moz-scrollbar-track {
 -moz-box-shadow：inset 0 0 6px rgba（0， 0,0,0.3）; 
 -moz-border-radius：10px; 
 border-radius：10px; 
} 
 / * Handle * / 
 
 ::  -  moz-scrollbar-thumb {
 -moz-border-radius：10px; 
 border-radius：10px; 
背景：rgb（0,62,132）; 
 -moz-box-shadow：inset 0 0 6px rgba（0,0,0,0.5）; 
} 
 
 ::  -  moz-scrollbar-thumb：window-inactive {
 background：rgb（0,153,255）; 
} 
  

解决方案

现在，通过自定义滚动条CSS仅适用于基于webkit的浏览器。

作为替代方案，我建议 NiceScroll ，一个jQuery插件，允许您自定义（至少一点）每个（如果不是，至少绝大多数）浏览器的滚动条。

guys is there a way to customize the scroll bar in Firefox i tried using a similar technique on chrome , but i guess it's only work for chrome , after doing some research i figured out that there is no way to customize it on Firefox using this method because of a bug in the engine, so i am looking for an alternative and clean way to do it

 ::-moz-scrollbar {
        width: 12px;
    }
    /* Track */

     ::-moz-scrollbar-track {
        -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    /* Handle */

     ::-moz-scrollbar-thumb {
        -moz-border-radius: 10px;
        border-radius: 10px;
        background: rgb(0, 62, 132);
       -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

     ::-moz-scrollbar-thumb:window-inactive {
        background: rgb(0, 153, 255);
    }

解决方案

For now, customizing scrollbars via CSS is only implemented for webkit based browsers.

As an alternative I recommend NiceScroll, a jQuery plugin that allows you to customize (at least a bit) the scrollbar on every (if not, at least a vast majority of them) browser.

这篇关于FireFox滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！