【问题标题】:Custom CSS Scrollbar for FirefoxFirefox 的自定义 CSS 滚动条
【发布时间】:2011-09-04 03:51:55
【问题描述】:

我想用 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。

【问题讨论】:

  • 请分享你如何使用 jQuery 做到这一点。我面临同样的问题,但使用 CSS 为 Webkit 修复它。但是,Firefox 提出了一个问题,您的 jQuery 解决方案可能会提供帮助。
  • 我推荐使用 jscrollpane jQuery 插件。
  • Firefox 中的 jScrollPane 存在问题。 jScrollPane 在 Chrome 中完美运行,但在 Firefox 中,jScrollPane 滚动条右侧有一个空的 system 滚动条。应该只有一个滚动条
  • 不正确。如果你有这个,你在某个地方做错了什么。

标签: css firefox webkit scrollbar


【解决方案1】:

简短的回答:

仅以下作品

在 Firefox 中(截至 2022 年 1 月)

property (not pseudo element!) allowed values
scrollbar-width thin (actually very thin)
auto (standard thick version)
none (hides the scrollbar)
scrollbar-color color color

您必须设置两个颜色值,第一个滚动条拇指第二个滚动条背景它接受任何正常的颜色值,使用诸如“黑色”之类的名称、诸如“#000000”之类的十六进制值、诸如“rgb(0,0,0) 之类的函数以及诸如“var(- -以前定义的黑色)”。 但它不采用线性渐变作为输入,通常也不通过 css 变量。 顺便说一下,属性的顺序并不重要。

【讨论】:

【解决方案2】:

2022 年

用最新的 Firefox 和 Chrome 版本测试

下面的 sn-p 会在 Chrome 和 Firefox 上显示相同的滚动条样式,试试看吧。

html {
  /* For Firefox */
  overflow-y: scroll;
  scrollbar-color: #008de4 #0d3b97;
  scrollbar-width: thin;
}

/* For Chrome and other browsers except Firefox */
body::-webkit-scrollbar {
    width: 0.5em;
    background-color: #0d3b97;
}
body::-webkit-scrollbar-thumb {
    background-color: #008de4;
}
<html>
<body style="height: 600px"></body>
</html>

您还可以使用以下方法自定义滚动条轨道(但不适用于 Firefox)

::-webkit-scrollbar-track

【讨论】:

    【解决方案3】:

    截至 2021 年,Firefox 滚动条自定义只有两个可用的属性; scrollbar-colorscrollbar width

    scrollbar-color: red yellow; /* track thumb */
    scrollbar-width: 5px; /* none, thin, or auto */
    

    .demo {
      overflow-y: scroll;
    }
    
    .demo {
      scrollbar-color: red yellow;
      scrollbar-width: 10px;
    }
    <div class="demo">
      <p>
        some scroll text...<br><br> don't you dare scroll to the bottom...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some
        scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> still here? fair warning, do
        NOT scroll farther down!<br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> STOP!
        <br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> NOW I'M MAD<br><br> some
        scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> AND THAT IS GENERALLY A BAD IDEA<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> bye
        <br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    last last last warning; you will not like what is at the bottom<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
        text...<br><br> some scroll text...<br><br> thare is nothing at the bottom!<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> NOTHING >:D
      </p>
    </div>

    HTML

    <div class="demo">
    

    CSS

    .demo {
        overflow-y: scroll;
    }
    
    .demo {
        scrollbar-color: red yellow;
        scrollbar-width: 5px;
    }
    

    【讨论】:

    【解决方案4】:

    2021

    火狐

    .nav{
    scrollbar-width: 0px;
    scrollbar-width: none;}
    

    ::-webkit-scrollbar {
      height: 0;  /* Remove scrollbar space */
      background: transparent;  
    /* Optional: just make scrollbar invisible */
    }
    

    为垂直和水平滚动条改变宽度或高度属性

    【讨论】:

      【解决方案5】:

      Firefox 只接受:

      scrollbar-color: #F8F8F8 // Add your color
      scroll-bar-width: thin/auto/none
      

      【讨论】:

        【解决方案6】:

        我想我会分享我的发现,以防有人考虑使用 jQuery 插件来完成这项工作。

        我试了一下jQuery Custom Scrollbar。它非常漂亮,可以进行一些平滑的滚动(带有滚动惯性),并且有很多可以调整的参数,但它最终对我来说有点过于 CPU 密集型(而且它给 DOM 增加了相当多的数量)。

        现在我要试试Perfect Scrollbar。它简单轻巧(6 KB),到目前为止做得不错。它根本不是 CPU 密集型的(据我所知),并且对您的 DOM 增加的很少。它只有几个参数需要调整(wheelSpeed 和 wheelPropagation),但这就是我所需要的,它可以很好地处理滚动内容的更新(例如加载图像)。

        附:我确实快速浏览了 JScrollPane,但@simone 是对的,它现在有点过时了,而且是一个 PITA。

        【讨论】:

        • 还有trackpad scroll emulator——这是 twitch.tv 使用的。
        • Perfect Scrollbar 其实真的很不错。在用尽了许多其他选择之后,我发现它是最好的解决方案。感谢您的建议。
        • nanoScroller 也很不错,而且比较精简。 jamesflorentino.github.io/nanoScrollerJS 与繁重的 JS 插件相反,这个只是隐藏了原生滚动条,并使用原生 'scroll' 事件显示了备用滚动条
        • 我一直在回避所有 jquery 解决方案,因为它们在速度较慢的机器或压力下的机器上落后,但 PS 看起来像是赢家
        【解决方案7】:

        这个功能是大量实验性的,我想 Mozilla 有很多工作要做,直到它对每个页面上的每个人都可用。我已经测试了许多解决方案,但以下代码运行良好。

        CSS

        :root {
          scrollbar-color: #333333 #999999 !important;
          scrollbar-width: thin !important;
        }
        

        #ClassName {
          scrollbar-color: #333333 #999999 !important;
          scrollbar-width: thin !important;
        }
        

        参考: LINK 1 LINK 2

        【讨论】:

          【解决方案8】:

          在这里,我已经为所有主要浏览器尝试了这个 CSS 并进行了测试:自定义颜色在滚动条上运行良好。

          是的,不同浏览器的多个版本存在限制。

          /* Only Chrome */
          html::-webkit-scrollbar {width: 17px;}
          html::-webkit-scrollbar-thumb {background-color: #0064a7; background-clip: padding-box; border: 1px solid #8ea5b5;}
          html::-webkit-scrollbar-track {background-color: #8ea5b5; }
          ::-webkit-scrollbar-button {background-color: #8ea5b5;}
          /* Only IE */
          html {scrollbar-face-color: #0064a7; scrollbar-shadow-color: #8ea5b5; scrollbar-highlight-color: #8ea5b5;}
          /* Only FireFox */
          html {scrollbar-color: #0064a7 #8ea5b5;}
          /* View Scrollbar */
          html {overflow-y: scroll;overflow-x: hidden;}
          <!doctype html>
          <html lang="en" class="no-js">
          <head>
              <meta charset="utf-8">
              <meta http-equiv="x-ua-compatible" content="ie=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
          </head>
          <body>
              <header>
                  <div id="logo"><img src="/logo.png">HTML5&nbsp;Layout</div>
                  <nav>  
                      <ul>
                          <li><a href="/">Home</a>
                          <li><a href="https://html-css-js.com/">HTML</a>
                          <li><a href="https://html-css-js.com/css/code/">CSS</a>
                          <li><a href="https://htmlcheatsheet.com/js/">JS</a>
                      </ul>
                  </nav>
              </header>
              <section>
                  <strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong>
              </section>
              <section id="pageContent">
                  <main role="main">
                      <article>
                          <h2>Stet facilis ius te</h2>
                          <p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
                      </article>
                      <article>
                          <h2>Illud mollis moderatius</h2>
                          <p>Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>
                      </article>
                      <article>
                          <h2>Ex ignota epicurei quo</h2>
                          <p>Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>
                      </article>
                      <article>
                          <h2>His at autem inani volutpat</h2>
                          <p>Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>
                      </article>
                  </main>
                  <aside>
                      <div>Sidebar 1</div>
                      <div>Sidebar 2</div>
                      <div>Sidebar 3</div>
                  </aside>
              </section>
              <footer>
                  <p>&copy; You can copy, edit and publish this template but please leave a link to our website | <a href="https://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
                  <address>
                      Contact: <a href="mailto:me@example.com">Mail me</a>
                  </address>
              </footer>
          
          
          </body>
          
          </html>

          【讨论】:

            【解决方案9】:

            截至 2018 年底,Firefox 中提供的自定义功能有限!

            查看这些答案:

            这是背景信息:https://bugzilla.mozilla.org/show_bug.cgi?id=1460109


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

            你必须坚持使用 JavaScript。

            很多人都喜欢这个功能,请参阅:https://bugzilla.mozilla.org/show_bug.cgi?id=77790


            就 JavaScript 替换而言,您可以尝试:

            【讨论】:

            • 谢谢你,ThirtyDot。但是有一个问题:-moz-appearance:scrollbartrack-vertical 和其他相关的 CSS 扩展怎么样?也许它们可以以某种方式使用?
            • 没有。不幸的是,-moz-appearance 的所有可能值都无济于事。 "The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme." - 你会得到一个原生滚动条。
            • 以防万一读到这里的人需要一个实用的解决方案,我最终使用了 jscrollpane jQuery 插件。
            • @JacquesMathieu,我明白你的意思。虽然这不是 Baron 的错,但如果我下载页面并阻止 baron 初始化,错误仍然存​​在。所以看起来 Chrome 在这里有问题。
            • drafts.csswg.org/css-scrollbars-1 是规范的第 1 阶段开始,但它已在 Firefox Nightly 中默认启用。
            【解决方案10】:

            2020 年可行

            /* Thin Scrollbar */
            :root{
              scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
              scrollbar-width: thin !important;
            }
            

            https://github.com/Aris-t2/CustomCSSforFx/issues/160

            【讨论】:

            • 好消息,但我们如何更改大纲?
            【解决方案11】:

            Firefox 64 增加了对规范草案 CSS Scrollbars Module Level 1 的支持,其中添加了 two new propertiesscrollbar-widthscrollbar-color,可以控制滚动条的显示方式。

            您可以将scrollbar-color 设置为以下值之一(来自 MDN 的描述):

            • auto 滚动条轨道部分的默认平台渲染,没有任何其他相关的滚动条颜色属性。
            • dark 显示深色滚动条,可以是平台提供的深色滚动条变体,也可以是自定义的深色滚动条。
            • light 显示一个浅色滚动条,可以是平台提供的浅色滚动条变体,也可以是自定义的浅色滚动条。
            • &lt;color&gt; &lt;color&gt; 将第一种颜色应用于滚动条缩略图,将第二种颜色应用于滚动条轨道。

            请注意,darklightare not currently implemented in Firefox

            ma​​cOS 笔记:

            macOS 默认的自动隐藏半透明滚动条不能使用此规则着色(它们仍然根据背景选择自己的对比色)。只有永久显示的滚动条(系统偏好设置 > 显示滚动条 > 始终)是彩色的。

            视觉演示:

            .scroll {
              width: 20%;
              height: 100px;
              border: 1px solid grey;
              overflow: scroll;
              display: inline-block;
            }
            .scroll-color-auto {
              scrollbar-color: auto;
            }
            .scroll-color-dark {
              scrollbar-color: dark;
            }
            .scroll-color-light {
              scrollbar-color: light;
            }
            .scroll-color-colors {
              scrollbar-color: orange lightyellow;
            }
            <div class="scroll scroll-color-auto">
            <p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
            </div>
            
            <div class="scroll scroll-color-dark">
            <p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
            </div>
            
            <div class="scroll scroll-color-light">
            <p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
            </div>
            
            <div class="scroll scroll-color-colors">
            <p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
            </div>

            您可以将scrollbar-width 设置为以下值之一(来自 MDN 的描述):

            • auto 平台默认滚动条宽度。
            • thin 提供该选项的平台上的细滚动条宽度变体,或者比默认平台滚动条宽度更细的滚动条。
            • none 不显示滚动条,但该元素仍可滚动。

            您还可以根据规范设置特定的长度值。 thin 和特定长度可能不会在所有平台上做任何事情,它的具体作用是特定于平台的。特别是,Firefox 目前似乎不支持特定的长度值 (this comment on their bug tracker seems to confirm this)。不过,thin 键似乎得到了很好的支持,至少支持 macOS 和 Windows。

            可能值得注意的是,长度值选项和整个 scrollbar-width 属性正在考虑在未来的草案中删除,如果发生这种情况,这个特定的属性可能会在未来的版本中从 Firefox 中删除。

            视觉演示:

            .scroll {
              width: 30%;
              height: 100px;
              border: 1px solid grey;
              overflow: scroll;
              display: inline-block;
            }
            .scroll-width-auto {
              scrollbar-width: auto;
            }
            .scroll-width-thin {
              scrollbar-width: thin;
            }
            .scroll-width-none {
              scrollbar-width: none;
            }
            <div class="scroll scroll-width-auto">
            <p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
            </div>
            
            <div class="scroll scroll-width-thin">
            <p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
            </div>
            
            <div class="scroll scroll-width-none">
            <p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
            </div>

            【讨论】:

            • 感谢您的回答。我更新了我接受的答案以宣传这个(以及其他相关答案),以便人们更有可能看到它。
            • 这基本上与三周前的Luca's answer 重复。
            • @JoshHabdas 该答案几乎没有包含尽可能多的兼容性或使用信息。我创建了这个答案,因为另一个答案没有我正在寻找的重要信息。
            • 您可以给予他们信任、建议反馈或考虑修改他们的答案。
            • @JoshHabdas 好吧,5 个人已经发现它很有用,而且它包含在网络上其他任何地方都找不到的信息,所以我不同意。
            【解决方案12】:

            由于Firefox 64,可以将new specs 用于简单的滚动条样式(不像Chrome 中的供应商前缀那么完整)。

            this example 中可以看到一个解决方案,它结合了不同的规则来解决 Firefox 和 Chrome 的问题,最终结果相似(不相等)(例如使用您原来的 Chrome 规则):

            关键规则是:

            对于 Firefox

            .scroller {
              overflow-y: scroll;
              scrollbar-color: #0A4C95 #C2D2E4;
            }
            

            对于 Chrome

            .scroller::-webkit-scrollbar {
                width: 15px;
                height: 15px;
            }
            
            .scroller::-webkit-scrollbar-track-piece  {
                background-color: #C2D2E4;
            }
            
            .scroller::-webkit-scrollbar-thumb:vertical {
                height: 30px;
                background-color: #0A4C95;
            }
            

            请注意,对于您的解决方案,也可以使用更简单的 Chrome 规则,如下所示:

            .scroller::-webkit-scrollbar-track  {
                background-color: #C2D2E4;
            }
            
            .scroller::-webkit-scrollbar-thumb {
                height: 30px;
                background-color: #0A4C95;
            }
            

            最后,为了在 Firefox 中也能隐藏滚动条中的箭头,目前需要使用以下规则将其设置为“thinscrollbar-width: thin;

            【讨论】:

            • 看起来 IE 5.5 可能已经做对了。 :)
            【解决方案13】:

            我可以提供替代方案吗?

            没有任何脚本,只有标准化的 CSS 样式和一点点创造力。简短的回答 - 屏蔽现有浏览器滚动条的部分内容,这意味着您保留它的所有功能。

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

            有关演示和更深入的解释,请查看此处...

            jsfiddle.net/aj7bxtjz/1/

            【讨论】:

            • 不幸的是,这不能回答问题。 Dimitri 正在尝试设置滚动条的样式,而不是隐藏它。
            • 那是 4 年前的事了(我知道这一点),所以我确信他现在已经做了一些事情。但是这个话题今天仍然很重要——虽然其他浏览器允许对滚动条进行某种类型的“非法”修改,但 FF 不允许。这就是我决定发布它的原因。前端结果是视觉样式滚动条,尽管这样做的方式是隐藏它的一部分。
            • 我喜欢这个解决方案,除了所有带有绝对定位的额外标记(使可变大小的东西成为一场噩梦),而且您实际上无法更改样式,您只是隐藏/隐藏现有滚动条的元素 - 太如果我想要一个绿色的酒吧,那就太糟糕了!
            • 是的,四年后,这不是回答 OP 的问题,而是为社区做出贡献。
            • 问题的本质是部分渲染引擎提供的解决方案不规范。这是最能解决我担忧的问题,也是我一直在寻找的答案。
            【解决方案14】:

            它以用户风格工作,但似乎不适用于网页。我还没有找到 Mozilla 的官方指示。虽然它可能在某些时候起作用,但 Firefox 对此没有官方支持。这个错误仍然存​​在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/了解详情。

            【讨论】:

            • 我试过和你写的一样,但它不适用于我的 FF,检查jsfiddle.net/gGbkY/1我错过了什么吗?
            • 它以用户风格工作,它似乎不适用于网页。我还没有找到 Mozilla 的官方指示。
            • 请查看相同的链接:它不再起作用了
            • 用户风格是什么?
            • 您链接的错误是 17 年前报告的,但仍未分配。我认为可以肯定地说 FF 永远不会支持隐藏原生滚动条。
            猜你喜欢
            • 2018-12-21
            • 2018-01-19
            • 2018-12-15
            • 1970-01-01
            • 1970-01-01
            • 2018-03-23
            相关资源
            最近更新 更多