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/ 祝你好运！

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

1 个答案: