Change Scrollbar Height
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...
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
4 Answers
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;
.
.
.
}
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
}
<!-- Create the custom cursor and cursor -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center the div</title>
<style>
body{
/* Solution */
cursor: url(cursor.png),default;
/* Customizing the scrollbar */
}
/* Solution to scrollbar */
::-webkit-scrollbar{
width: 30px;
}
::-webkit-scrollbar-thumb{
width: 30px;
background-color: red;
border-radius: 30px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-button{
}
*{
margin: 0; padding: 0; box-sizing: border-box;
}
.parent{
height: 100vh;
width: 100%;
background-color: rgba(255, 0, 0, 0.555);
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: 400px;
height: 400px;
background-color: green;
border-radius: 30px;
}
.parent-1{
height: 100vh;
width: 100%;
background-color: rgba(48, 168, 0, 0.555);
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent-1"></div>
</body>
</html>
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
