Change scrollbar height
the default code for height of scrollbar
::-webkit-scrollbar-button {
width: 0px; //for horizontal scrollbar
height: 0px; //for vertical scrollbar
}
increase the width and height of both simultaneously having same value to adjust the height of scrollbar
-----------------
| ||
| ||
| ||
| ||
| ||
| ||
|______________||
if you want to decrease the height of scrollbar then use
::-webkit-scrollbar-button {
width: 50px; //for horizontal scrollbar
height: 50px; //for vertical scrollbar
}
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>All you need to do is:
::-webkit-scrollbar-track {
margin-top: 10px;
margin-bottom: 10px;
.
.
.
}