Custom scrollbars achieve
This section webkit browser for the kernel, use pseudo-classes to change the default style scroll bar, as follows:
Part of the scroll bar
1. :: - webkit-scrollbar integral part of the scroll bar
2. :: - webkit-scrollbar-thumb scroll bar inside the small box, can be moved upward downward (right or left)
3. :: - webkit-scrollbar-track of the scroll bar track (which is equipped with Thumb)
4. :: - at both ends of the track buttons webkit-scrollbar-button scroll bar, due to the location by clicking the small box of fine-tuning.
5. :: - webkit-scrollbar-track-piece inner orbit scroll bar intermediate portion
6. :: - webkit-scrollbar-corner edges, i.e., where the vertical scroll bar and a horizontal scroll bar intersecting
7. :: - for adjusting the drag element size gizmo on the corner of webkit-resizer two scroll bars
Scroll bar composition structure is as follows:
Other settings:
: Horizontal
// Horizontal pseudo-class applies to any horizontal scroll bar in the direction
: Vertical
// Vertical pseudo-class for any vertical scroll bar
: Decrement
// Decrement button pseudo-class and is suitable for orbital debris. Represents a decrement button or orbital debris, for example can be made up or move to the right area and region buttons
: INCREMENT
// INCREMENT button pseudo-class and is suitable for orbital debris. Represents a button or incremental orbital debris, for example, that the region moved to the left or downward region and buttons
: Start
// Start button pseudo-class and is suitable for orbital debris. Mean an object (button orbital debris) on the front slider
: End
// End pseudo-class applies to buttons and orbital debris. Mean an object (button orbital debris) on the back of the slider
: Double-Button
// Double-Button button pseudo-class and is suitable for orbital debris. Determine whether the location of the end of the track is a pair of buttons. That is Orbital debris next to a pair of buttons together.
: SINGLE-Button
// Button SINGLE-button pseudo-class and is suitable for orbital debris. Determine whether the location of the end of the track is a button. That is Orbital debris next to a separate button.
: Button NO-
NO-Button class represents a pseudo track position is not the end button.
: corner-Present
// corner Present pseudo-class represents a scrollbar corner exists.
: window-inactive
// for all the scroll bar, scroll bar represents the area containing the focus is not in the window of time.
:: - WebKit-ScrollBar-Track-piece ...: Start {
/ * last half or the left half of the scroll bar * /
}
:: - WebKit-Thumb-ScrollBar: window-inactive {
/ * when the focus is not in the current state of the region of the slider * /
}
:: - WebKit-scrollBar-button: horizontal: Decrement: hover {
/ * when the mouse button status on the horizontal scroll bar below * /
}
Example:
Html
<div class="test test-1">
<div class="scrollbar"></div>
</div>
Css
.test{
width: 50px;
height: 200px;
overflow: auto;
float: left;
margin: 5px;
border: none;
}
.scrollbar{
width: 30px;
height: 300px;
margin: 0 auto;
}
.test-1 :: - webkit-scrollbar {/ * scrollbar overall style * /
width: 10px; / * Aspect corresponding vertical scroll bar size * /
height: 1px;
}
.test-1 :: - webkit-scrollbar-thumb {/ * * scroll inside the small box /
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.test-1 :: - webkit-scrollbar-track {/ * * orbital scroll inside /
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
The results are as follows:
Note that only valid in chrome!
:: - webkit-scrollbar {} such an approach is global change scrollbar.
