如何更改溢出 y 滚动条样式

Question

我使用以下样式应用了 overflov-y 滚动：

 .custom #front_videos .large-2 {
    height: 545px;
    overflow-y: scroll;
    position: relative;
}

像这样显示滚动-> http://nimb.ws/XZ3RVS

我想像这样显示滚动条-> http://nimb.ws/IGMnXl

所以任何人都知道如何使用 CSS 样式显示这样的滚动条然后重播我。

谢谢。

原文由 Ketan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我使用 ::-webkit-scrollbar 和它的兄弟选择器为您设计了一些看起来非常相似的样式。请注意，这仅适用于 Chromium 浏览器，因为滚动条不是 W3C 规范的一部分，因此在 Chrome 相对强大的伪选择器之外没有有效的选择器。

 .large-2 {
  margin-left: 30px;
  float: left;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 25px;
  width: 100px;
  background: #ccc;
}

.force-overflow {
  min-height: 450px;
}

.large-2::-webkit-scrollbar-track {
  border: 1px solid #000;
  padding: 2px 0;
  background-color: #404040;
}

.large-2::-webkit-scrollbar {
  width: 10px;
}

.large-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #737272;
  border: 1px solid #000;
}

 <div class="custom">
  <div id="front_videos">
    <div class="large-2">
      <div class="force-overflow"></div>
    </div>
  </div>
</div>

有一个相对优雅的 JavaScript 解决方案，称为 NanoScroller—— 虽然我个人没有太多经验，如果你正在寻找具有更多跨浏览器能力的东西。

原文由 Xhynk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试这个：

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

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
}

原文由 m b k 发布，翻译遵循 CC BY-SA 4.0 许可协议