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
104 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> <div> <div> 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> <div></div> </div> <div></div> </body> </html> 
