javascript - 当我在 Chrome 上而不是在 Firefox 上时，为什么滚动条会发生变化

Question

所以我在玩滚动条，我试图重新创建它们(下面的链接)，我刚刚意识到，如果我在 Chrome 上，它们只会改变颜色，如果我在 Firefox 上，则不会，这是什么原因以及如何做我妥善处理这个？我也尝试查看其他示例，但似乎无论我查看什么示例，它们都对 Firefox 没有影响

https://codepen.io/akinjide/pen/BpggrZ

HTML

- var n = 1

h1 Customize the Browser's Scrollbar with CSS

#wrapper
  .scrollbar#style-default
    .force-overflow

while n < 12
  .scrollbar(id="style-" + n++)
    .force-overflow

CSS

.scrollbar {
    margin-left: 22px;
    float: left;
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.force-overflow {
    min-height: 450px;
}

#wrapper {
    text-align: center;
    margin: auto;
}

#style-1::-webkit-scrollbar,
#style-2::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar,
#style-5::-webkit-scrollbar,
#style-6::-webkit-scrollbar,
#style-7::-webkit-scrollbar,
#style-8::-webkit-scrollbar,
#style-9::-webkit-scrollbar,
#style-10::-webkit-scrollbar,
#style-11::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

/**  STYLE 1 */
#style-1::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

#style-1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/**  STYLE 2 */
#style-2::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}

#style-2::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/**  STYLE 3 */
#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb {
    background-color: #000000;
}

/**  STYLE 4 */
#style-4::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb {
    background-color: #000000;
    border: 2px solid #555555;
}

/**  STYLE 5 */
#style-5::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb {
    background-color: #0ae;
    background-image: -webkit-gradient(linear, 0 0, 0 100%,
                      color-stop(.5, rgba(255, 255, 255, .2)),
                              color-stop(.5, transparent), to(transparent));
}

/**  STYLE 6 */
#style-6::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb {
    background-color: #F90; 
    background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, .2) 50%,
                                              rgba(255, 255, 255, .2) 75%,
                                              transparent 75%,
                                              transparent)
}

/** STYLE 7 */
#style-7::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-7::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
                                       left bottom,
                                       left top,
                                       color-stop(0.44, rgb(122,153,217)),
                                       color-stop(0.72, rgb(73,125,189)),
                                       color-stop(0.86, rgb(28,58,148)));
}

/**  STYLE 8 */
#style-8::-webkit-scrollbar-track {
    border: 1px solid black;
    background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb {
    background-color: #000000;  
}

/**  STYLE 9 */
#style-9::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar-thumb {
    background-color: #F90; 
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, .2) 50%,
                                              rgba(255, 255, 255, .2) 75%,
                                              transparent 75%,
                                              transparent)
}

/**  STYLE 10 */
#style-10::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(left, #96A6BF, #63738C);
  box-shadow: inset 0 0 1px 1px #5C6670;
}

#style-10::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #eee;
  box-shadow: 0 0 1px 1px #bbb, inset 0 0 7px rgba(0,0,0,0.3)
}

#style-10::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(left, #8391A6, #536175);
}

/**  STYLE 11 */
#style-11::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
  border: 1px solid #ccc;
}

#style-11::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(left, #fff, #e4e4e4);
  border: 1px solid #aaa;
}

#style-11::-webkit-scrollbar-thumb:hover {
  background: #fff;
}

#style-11::-webkit-scrollbar-thumb:active {
  background: linear-gradient(left, #22ADD4, #1E98BA);
}

Answer 1

我相信 Firefox 不支持自定义滚动条颜色。 17 年来一直有人提出更改此要求的请求。 https://bugzilla.mozilla.org/show_bug.cgi?id=77790您必须使用诸如 http://jscrollpane.kelvinluck.com/ 之类的库(我读过的是 PITA)或 http://utatti.github.io/perfect-scrollbar/祝你好运!