有什么方法只能在Firefox中使用css来定制滚动条吗?我在Chrome中找到了这个，但在Firefox中却找不到 [英] Is there any way to have custom scrollbar using css only in Firefox?? I found this for chrome but not for Firefox

问题描述

我想为我的网站提供一个自定义滚动条，我发现它是用于chrome的，而不是用于firefox的.我不想使用沉重的jQuery插件，仅使用CSS可以做到这一点吗? 我为Chrome找到的CSS:

I want a custome scrollbar for my website, I found this for chrome, but not for firefox. I dont want to use heavy jQuery plugins, Is that possible to do this with css only? CSS I found for Chrome:

::-webkit-scrollbar {
        width: 12px;
    }

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

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    }

推荐答案

自Firefox 64版开始，您可以使用以下

Since Firefox version 64 you can use the following two css properties to provide style and color to the scrollbar.

滚动条宽度 滚动条颜色

scrollbar-width scrollbar-color

.scrollable {
    scrollbar-width: thin;
    scrollbar-color: #3487ab #efefef;
}

.scrollable {
  background-color: #a3d5d3;
  height: 100%;
  overflow-y: auto;
  width: 240px;
  height: 120px;
}

  <div class="scrollable">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
  </div>

这篇关于有什么方法只能在Firefox中使用css来定制滚动条吗?我在Chrome中找到了这个，但在Firefox中却找不到的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！