How to change overflow y scrollbar styles

Question

I have applied overflov-y scroll using following style:

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

that display scroll like this -> http://nimb.ws/XZ3RVS

I want to display that scroll bar like this -> http://nimb.ws/IGMnXl

So any one have idea how to display scroll bar like this using CSS style then replay me.

Thanks.

Answer 1

I've whipped up some styles for you that looks pretty similar making use of ::-webkit-scrollbar and it's sibling selectors. Note this is only for Chromium browsers, as Scrollbars aren't a part of the W3C spec and thus don't have valid selectors, outside of Chrome's relatively robust pseudo-selectors.

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

There is a relatively graceful JavaScript solution called NanoScroller - though I don't personally have much experience with if, if you're looking for something with more cross-browser ability.