我如何自定義滾動條

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 定義類或 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 try small image 中更改顏色和圖像，您可能還需要調整位置。

 .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>