'Change scrollbar height

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

enter image description here

I tried with

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

Or

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

But nothing happened

Thank

css


Solution 1:[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.

enter image description here

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>

Solution 2:[2]

All you need to do is:

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

Solution 3:[3]

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
}

Solution 4:[4]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 MarchalPT
Solution 3 Nitin Shinde
Solution 4 user18009835

Related Questions