首页 文章

适用于Firefox的自定义CSS滚动条

提问于
浏览 次
243

我想用CSS自定义滚动条 .

我使用这个WebKit CSS代码，适用于Safari和Chrome：

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

我怎样才能在Firefox中做同样的事情？

我知道我可以使用jQuery轻松地做到这一点，但如果可行，我更愿意使用纯CSS .

非常感谢某人的专家建议！

css firefox webkit scrollbar

6 回答

  • 1

    没有相当于 ::-webkit-scrollbar 和朋友的Firefox .

    你必须坚持使用JavaScript .

    很多人都希望看到这个功能，请参阅：https://bugzilla.mozilla.org/show_bug.cgi?id=77790

    这份报告要求您提出完全相同的要求：https://bugzilla.mozilla.org/show_bug.cgi?id=547260

    它作为我链接的第一份报告的副本而关闭 .

    对于JavaScript替换品，您可以尝试：

    回复于
  • 41

    我可以提供替代方案吗？

    没有任何脚本，只有标准化的CSS风格和一点点创造力 . 简短回答 - 屏蔽现有浏览器滚动条的部分，这意味着您将保留其所有功能 .

    .scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

    有关演示和更深入的解释，请点击此处...

    jsfiddle.net/aj7bxtjz/1/

    回复于
  • 190

    我想如果有人正在考虑使用JQuery插件来完成这项工作，我会分享我的发现 .

    我给了JQuery Custom Scrollbar一个去 . 这是非常花哨的并且做了一些平滑的滚动（滚动惯性）并且有大量的参数你可以调整，但它最终对我来说有点CPU密集（并且它为DOM增加了相当多的数量） .

    现在我给了Perfect Scrollbar一个去 . 到目前为止，它做得还不错 . 它只有几个参数来调整（wheelSpeed和wheelPropagation），但这是我所需要的，它可以很好地处理滚动内容的更新（例如加载图像） .

    附：我确实快速浏览了JScrollPane，但是@simone是对的，它现在有点过时和PITA了 .

    回复于
  • 1
    @-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}
    回复于
  • 0

    2018年Firefox滚动条仍然看起来和1992年一样糟糕，它是一个PITA，但我们现在可以使用 css filters .

    这是一个在顶部与绿色交叉浏览器兼容的同色调的示例 .

    明智地使用 .

    div {
  max-height: 200px;
  max-width: 80%;
  overflow-x: hidden;
  overflow-y: scroll;

  filter: sepia(100%) saturate(360%) grayscale(0) contrast(140%) hue-rotate(56deg) invert(16%)

}

    <div>

<ul>
<li><a href="/wiki/Chapati" title="Chapati">Chapati</a>, unleavened flatbread from the <a href="/wiki/Indian_subcontinent" title="Indian subcontinent">Indian subcontinent</a></li>
<li><a href="/wiki/Wheat_tortilla" title="Wheat tortilla">Flour tortilla</a>, a thin unleavened flatbread from <a href="/wiki/Mexico" title="Mexico">Mexico</a></li>
<li><a href="/wiki/Focaccia" title="Focaccia">Focaccia</a>, a flat oven-baked bread from <a href="/wiki/Italy" title="Italy">Italy</a></li>
<li><a href="/wiki/Injera" title="Injera">Injera</a>, a sourdough-risen flatbread from <a href="/wiki/East_Africa" title="East Africa">East Africa</a></li>
<li><a href="/wiki/Khachapuri" title="Khachapuri">Khachapuri</a>, a breaded cheese dish from <a href="/wiki/Georgia_(country)" title="Georgia (country)">Georgia</a></li>
<li><a href="/wiki/Khubz" title="Khubz">Khubz</a>, a round bread from the <a href="/wiki/Arabian_Peninsula" title="Arabian Peninsula">Arabian Peninsula</a></li>
<li><a href="/wiki/Matnakash" title="Matnakash">Matnakash</a>, a leavened bread from <a href="/wiki/Armenia" title="Armenia">Armenia</a> (related to the <a href="/wiki/Ramadan_pita" class="mw-redirect" title="Ramadan pita">Ramadan pita</a>)</li>
<li><a href="/wiki/Naan" title="Naan">Naan</a>, a leavened, oven-baked flatbread from <a href="/wiki/Central_Asian_cuisine" class="mw-redirect" title="Central Asian cuisine">Central</a> and <a href="/wiki/South_Asian_cuisine" title="South Asian cuisine">South Asia</a></li>
<li><a href="/wiki/Pit%C4%83_de_Pecica" title="Pită de Pecica">Pită de Pecica</a>, a round bread from <a href="/wiki/Romania" title="Romania">Romania</a></li>
<li><a href="/wiki/Rghaif" class="mw-redirect" title="Rghaif">Rghaif</a>, a pancake-like bread from <a href="/wiki/Maghreb" title="Maghreb">Northwest Africa</a></li>
</ul>

</div>
    回复于
  • 36

    它以用户风格工作，似乎不适用于网页 . 我还没有找到Mozilla的官方指示 . 虽然它可能在某些时候起作用，但Firefox没有官方支持 . 这个bug仍然是开放https://bugzilla.mozilla.org/show_bug.cgi?id=77790

    scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

    检查http://codemug.com/html/custom-scrollbars-using-css/了解详情 .

    回复于

相关问题