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:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
border: 1px solid silver;8
width: 200px;9
height: 150px;10
overflow: auto;11
}12
13
.wrapper {14
min-height: 1000px; /* <----- it affects on vertical scrollbar height */15
}16
17
</style>18
</head>19
<body>20
<div class="container">21
<div class="wrapper">22
Some text here ...<br />Some text here ...<br />Some text here ...<br />Some text here ...<br />23
Some text here ...<br />Some text here ...<br />Some text here ...<br />Some text here ...<br />24
Some text here ...<br />Some text here ...<br />Some text here ...<br />Some text here ...<br />25
</div>26
</div>27
</body>28
</html>
Complex example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
border: 1px solid silver;8
width: 200px;9
height: 150px;10
overflow: auto;11
}12
13
.wrapper-1 {14
min-height: 500px; /* <----- it affects on vertical scrollbar height */15
}16
17
.wrapper-2 {18
min-height: 1000px; /* <----- it affects on vertical scrollbar height */19
}20
21
</style>22
</head>23
<body>24
<div class="container">25
<div class="wrapper-1">26
Some text here ...<br />Some text here ...<br />Some text here ...<br />Some text here ...<br />27
Some text here ...<br />Some text here ...<br />Some text here ...<br />Some text here ...<br />28
Some text here ...<br />Some text here ...<br />Some text here ...<br />Some text here ...<br />29
</div>30
</div>31
<div class="container">32
<div class="wrapper-2">33
Some text here ...<br />Some text here ...<br />Some text here ...<br />Some text here ...<br />34
Some text here ...<br />Some text here ...<br />Some text here ...<br />Some text here ...<br />35
Some text here ...<br />Some text here ...<br />Some text here ...<br />Some text here ...<br />36
</div>37
</div>38
</body>39
</html>
See also
0 commentsShow commentsAdd comment
