如何自定义滚动条

Question

我想自定义div中的滚动条。我使用以下代码来更改它。但我不知道如何更改滚动按钮，也没有得到我想要的结果 此外，它在 Mozilla Firefox 浏览器中不起作用。 我想要什么：

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

 ::-webkit-scrollbar-track {
  background: #888;
}

 ::-webkit-scrollbar-thumb {
  background: #888;
}

 ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>

Answer 1

Firefox 实现部分支持 v64 中的自定义滚动条。

.your-div-selector {
    scrollbar-color: #0a4c95 #c2d2e4; /* Track color and thumb color */
}

如果您想要像草图中那样具有一致的样式，我会推荐第三方 JavaScript 选项，例如 https://grsmto.github.io/simplebar/（有很多）。

Answer 2

您需要为该 div 定义 class 或 id，然后将 CSS 类添加到该特定 div：

#MY-div-id::-webkit-scrollbar {
width: 3px;
}

#MY-div-id::-webkit-scrollbar-track {
background: #888;
}

#MY-div-id::-webkit-scrollbar-thumb {
background: #888;
}

#MY-div-id::-webkit-scrollbar-thumb:hover {
background: #555;
}

Answer 3

这里是与 css 几乎匹配的代码。您只需更改 ::-webkit-scrollbar-thumb 中的颜色和图像，尝试小图像，您可能还需要调整位置。

 .container {
      margin: 40px auto;
      width: 1000px;
      height: 200px;
      overflow-y: scroll;
    }
    .container::-webkit-scrollbar {
      width: 20px;
    }
    .container::-webkit-scrollbar-track {
      background: tomato;
      border-left: 9px solid white;
      border-right: 9px solid white;
    }
    ::-webkit-scrollbar-thumb {
        background-image:url( http://i.imgur.com/ygGobeC.png);
    }
    .container .item {
      height: 20px;
      margin-bottom: 5px;
      background: silver;
    }
    .container .item:last-child {
      margin-bottom: 0;
    } 
    .container {
        direction:rtl;
      }

 <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

 

Answer 4

如果您使用 PHP，这里的函数将在作为参数传递给该函数的类中输出所有浏览器所需的 css。然后您在脚本的 ... 部分调用该函数。不要忘记将类添加到（我不知道哪一个是正确的；我总是选择 2，因为在某些时候我可能会被引导去思考某些浏览器使用而其他浏览器使用）

function WriteScrollBarsStyle ($thumb_color_code,$track_color_code,$border_width='2px',$class_name='ScrollBarsColored') {echo 
.{$class_name} {
scrollbar-color:#{$thumb_color_code} #{$track_color_code};
}

.{$class_name}::-webkit-scrollbar {
height:100%;
}

.{$class_name}::-webkit-scrollbar-track {
border:{$border_width} solid #{$thumb_color_code};
background:#{$track_color_code};
background-color:#{$track_color_code};
}

.{$class_name}::-webkit-scrollbar-thumb {
border:{$border_width} solid #{$track_color_code};
background:#{$thumb_color_code};
background-color:#{$thumb_color_code};
}

.{$class_name}::-webkit-scrollbar-thumb:hover {
background:#{$thumb_color_code};
background-color:#{$thumb_color_code};
}";

}