we firstly need to know how to show scrollbar, this is controlled by the overflow
attribute.
example code:
<div class="scroll-box">
<p>
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc onsequat efficitur ultrices. Nullam hendrerit posuere est.
</p>
</div>
<style>
.scroll-box {
width:500px;
height:200px;
overflow:X; /* 'X' will be replaced by following attributes */
background-color: #6c757d;
white-space: nowrap;
}
</style>
overflow:auto
: only show scrollbar when content exceeds assigned height and/or width
overflow:scroll
: show scrollbar area regardless of whether the content exceeds
we can also assign which direction to show the scrollbar by adding -x
or -y
:
overflow-x:scroll
overflow-y:scroll
overflow:visible
: default value, exceeding content won't be hidden but will show outside the container
overflow:hidden
: exceeding content will be hidden
overflow:inherit
: inherit the attribute from parent element
Note: with my test, following pseudo classes only work well on Chrome but not Firefox
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
corresponding parts controlled by these pseudo classes:
source code in ‘example code’
these pseudo classes can be used in at least three ways (replace x
with button
, track
, etc):
#id_selector::-webkit-scrollbar-x{
/* CSS attributes */
}
.class_selector::-webkit-scrollbar-x{
/* CSS attributes */
}
::-webkit-scrollbar-x{
/* CSS attributes */
}
if you want to customize specific elements, assign an id selector or class selector
directly use ::-webkit-scrollbar-x
will affect all the elements in a page that have contents exceeded.
to customize a scrollbar, we should first declare a -webkit-scrollbar
like:
#style1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
with this, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS. Then we can use other pseudo classes.
or from names of these pseudo classes, we may notice that ::-webkit-scrollbar-x
(replace x
with button
, track
,thumb
,corner
, etc) are based on ::-webkit-scrollbar
, which means:
::-webkit-scrollbar-x
won't work if ::-webkit-scrollbar
not defined.::-webkit-resizer
can be used independentlyother tips:
::-webkit-resizer
seems only working with <textarea></textarea>
element.html:
<h3>scrollbar1</h3>
<div id="style1" class="scroll-box1">
<p>....</p>
</div>
<hr>
<h3>scrollbar2</h3>
<textarea id="style2" class="scroll-box2">
<p>...</p>
</textarea>
scrollbar1:
/* scrollbar1 */
.scroll-box1{
width:300px;
height:200px;
overflow:auto;
background-color: #6c757d;
white-space: nowrap;
}
#style1::-webkit-scrollbar
{
width: 13px;
height:13px;
background-color: #F5F5F5;
}
#style1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #5cb2ae;
}
#style1::-webkit-scrollbar-corner{
background-color:yellowgreen;
}
scrollbar2:
/* scrollbar2 */
.scroll-box2{
width:300px;
height:200px;
overflow:scroll;
background-color: #6c757d;
white-space: nowrap;
}
#style2::-webkit-scrollbar
{
width: 13px;
height:13px;
background-color: #F5F5F5;
}
#style2::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #5cb2ae;
}
#style2::-webkit-resizer{
background-image: url(../images/resizer.png);
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
background-size: cover;
}
#style2::-webkit-scrollbar-track{
background-color:lightblue;
}
#style2::-webkit-scrollbar-button {
background-color:#5cb2ae;
}
#style2::-webkit-scrollbar-button:vertical:end {
background-image: url(../images/arrow-2.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#style2::-webkit-scrollbar-button:vertical:start {
background-image: url(../images/arrow-1.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#style2::-webkit-scrollbar-button:horizontal:end{
background-image: url(../images/arrow-4.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#style2::-webkit-scrollbar-button:horizontal:start {
background-image: url(../images/arrow-3.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}