Change scrollbar height

Question

I would like to know if it's possible to change scrollbar height like this image:

I tried with

::-webkit-scrollbar {max-height: 50%; height: 50%;} 

Or

::-webkit-scrollbar-track {max-height: 50%; height: 50%;} 

But nothing happened

---

Thank

Answer 1

It is possible. The first thing you need to know is the structure of a scroll bar. Here I reference a picture from css-tricks.

to achieve what you want, you need:

• change where 5(scrollbar thumb) start to scroll and stop scrolling
• fake a scroll track instead of 3.

.page {     position: relative;    width: 100px;     height: 200px;  }    .content {     width: 100%;  }    .wrapper {    position: relative;    width: 100%;     height: 100%;     padding: 0;     overflow-y: scroll;     overflow-x: hidden;     border: 1px solid #ddd;  }    .page::after {     content:'';    position: absolute;    z-index: -1;    height: calc(100% - 20px);    top: 10px;    right: -1px;    width: 5px;    background: #666;  }    .wrapper::-webkit-scrollbar {      display: block;      width: 5px;  }  .wrapper::-webkit-scrollbar-track {      background: transparent;  }        .wrapper::-webkit-scrollbar-thumb {      background-color: red;      border-right: none;      border-left: none;  }    .wrapper::-webkit-scrollbar-track-piece:end {      background: transparent;      margin-bottom: 10px;   }    .wrapper::-webkit-scrollbar-track-piece:start {      background: transparent;      margin-top: 10px;  }

<div class="page">  <div class="wrapper">  <div class="content">  a<br/>  a<br/>  a<br/>  a<br/>a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  a<br/>a<br/>  a<br/>  a<br/>  a<br/>  a<br/>  </div>  </div>  </div>

Answer 2

All you need to do is:

::-webkit-scrollbar-track {     margin-top: 10px;     margin-bottom: 10px;     .     .     . }