EN
CSS - how to change vertical scrollbar height?
1
answers
3
points
How can I change vertical scrollbar height?
More precisely, I want to change this part:
1 answer
3
points
By using CSS you can change only vertical scrollbar width.
Possible solutions:
- Custom scrollbar library.
- By using some trick you can change scrollbar height with additional content wrapper element. The trick disadvantage is empty space that is appended to the content.
Simple example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.container {
border: 1px solid silver;
width: 200px;
height: 150px;
overflow: auto;
}
.wrapper {
min-height: 1000px; /* <----- it affects on vertical scrollbar height */
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
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>
</div>
</body>
</html>
Complex example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.container {
border: 1px solid silver;
width: 200px;
height: 150px;
overflow: auto;
}
.wrapper-1 {
min-height: 500px; /* <----- it affects on vertical scrollbar height */
}
.wrapper-2 {
min-height: 1000px; /* <----- it affects on vertical scrollbar height */
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper-1">
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>
</div>
<div class="container">
<div class="wrapper-2">
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>
</div>
</body>
</html>
See also
0 comments
Add comment