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

用于v64中自定义滚动条的Firefox实现partial support。

.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中尝试小图像，您可能还需要调整位置。

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

我如何自定义滚动条

3 个答案: