Question

我为滚动条设置了这种风格。但是如何将它应用于具有溢出的div：滚动？

知道怎么做吗？

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="something">
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
<p>adasda</p>
</div>

＆＃13;

Answer 1

要在scrollbar上方添加自定义div样式，您需要在上面的代码中添加width属性，如下所示。

＆＃13;

.something {
  height: 200px;
  overflow-y: scroll; /*Adding scrollbar to div on content overflow*/ 
}

.something::-webkit-scrollbar { 
  /*This serves as background of scrollbar. Add background color to see the difference*/
  width: 20px;
}

.something::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.something::-webkit-scrollbar-thumb {
 /*This styles the above scroll-track which automatically resize as page size increases or decrease, change background color and see the difference*/
  border-radius: 10px;
  background-color: #ccc;
}

＆＃13;

<div class="something">
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
  <p>adasda</p>
</div>

＆＃13;

注意： 滚动条样式无法在 Firefox和IE / EDGE 上运行，请检查caniuse.com上的支持并为其他浏览器添加vendor-prefix。

Answer 2

您可以将滚动条样式添加到类中吗？

.something::-webkit-scrollbar-track {
    height: 200px;
    overflow-y: scroll;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5; 
}

然后将该课程应用到您的列表中？

将样式应用于元素

2 个答案: