Custom page scroll bar

A scroll bar is a pseudo element that can be customized. This pseudo class can render WebKit's own scroll bar and only render it according to the custom CSS information.

/* Scroll bar */
:-WebKit-scrollbar {Height: 7px; width: 10px;} // The width can also be defined as a percentage.

// The slider in the scroll bar
:-WebKit-scrollbar-thumb {
Min-Height: 30px;
Background: rgba (0, 0,. 5 );
Border-radius: 100px;
Box-Shadow: 0 0 1px 1px rgba (255,255,255, 0.25 );
}
:-WebKit-scrollbar-thumb: hover {Background: rgba (0, 0,. 7 );}
:-WebKit-scrollbar-thumb: Active {Background: rgba (0, 0,. 8 );}

// Scroll bar track

//: Horizontal (the horizontal pseudo class applies to the scroll bars in any horizontal direction)

//: Vertical (vertical pseudo class applies to scroll bars in any vertical direction)

:-WebKit-scrollbar-Track: vertical {
Background:-WebKit-gradient (linear, 0 0,100% 0, from (rgba (0, 0, 0 ,. 13), to (rgba (0, 0, 0 ,. 13), color-stop (. 5, rgba (0, 0, 0 ,. 05 )));
}
:-WebKit-scrollbar-Track: horizontal {
Background:-WebKit-gradient (linear, 0 0, 0 100%, from (rgba (, 0, 0 ,. 13), to (rgba (0, 0, 0 ,. 13), color-stop (. 5, rgba (0, 0, 0 ,. 05 )));
}

:-WebKit-scrollbar-corner {Background: # e7e7e7 ;}

:-WebKit-scrollbar-thumb: window-inactive {
/* When the focus is not in the status of the slider in the current area */

}

 

Http://edu.cnzz.cn/201212/836936e7.shtml for more information

Custom page scroll bar