css - 如何更改溢出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样式显示这样的滚动条，然后重播我。

谢谢。

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-尽管我个人是否有很多经验，如果您正在寻找具有更多跨浏览器功能的东西。