EN
CSS - how to change vertical scrollbar width?
1
answers
8
points
How can I change vertical scrollbar width?
More precisely, I want to change this part:
1 answer
2
points
To change vertical scrollbar width you need to use custom styles for scrollbar, its track and thumb. In other case you won't be able to change the width.
Quick solution:
.container::-webkit-scrollbar {
width: 12px; /* <-------------------------- it changes vertical scrollbar width */
}
.container::-webkit-scrollbar-track { /* <----- required */
background: #efefef;
}
.container::-webkit-scrollbar-thumb { /* <----- required */
background: #ffea75;
}
Practical example:
// ONLINE-RUNNER:browser;
<!DOCTYPE>
<html>
<head>
<style>
.container {
height: 100px;
width: 250px;
overflow-y: scroll;
}
.container::-webkit-scrollbar {
width: 12px; /* <-------------------------- it changes vertical scrollbar width */
}
.container::-webkit-scrollbar-track { /* <----- required */
background: #efefef;
}
.container::-webkit-scrollbar-thumb { /* <----- required */
background: #ffea75;
}
</style>
</head>
<body>
<div class="container">
Some text here...<br />Some text here...<br />Some text here...<br />
Some text here...<br />Some text here...<br />Some text here...<br />
Some text here...<br />Some text here...<br />Some text here...<br />
Some text here...<br />Some text here...<br />Some text here...<br />
</div>
</body>
</html>
See also
0 comments
Add comment