The scroll bar style used in the project is adjusted to suit your style on the other's basis. (ie can debug the scroll bar style, Firefox can not debug at the moment)
::-webkit-scrollbar { width: px; }/ * Track & Scroll thickness * / ::-webkit-scrollbar-track { background-color:#ddd; }/ * Track color * / ::-webkit-scrollbar-thumb { background-color: #333;} / * Scroll color * / ::-webkit-scrollbar-thumb: Hover { background-color: #000 }/ * Scroll hover color * / ::-webkit-scrollbar-thumb: Active { background-color: #000 }/ * Scroll Click & drag Color * /
Share the WebKit kernel scroll bar style in my project (Chrome,sarfrai)
Demo:http://codepen.io/tianzi77/pen/mjnpme
*{ margin: 0; padding: 0; } Div { margin: px Auto; padding: tenpx; width: px; height: px; Border: 1px solid #ddd; } P { height: + px; } / * Define the scroll bar style yourself * / . Webkit-scrollbar { overflow: hidden; } . Webkit-scrollbar: Hover { overflow-y: scroll; } . Webkit-scrollbar::-webkit-scrollbar { width: 7px; height: 7px; / * Set the width/height of the entire scroll bar * / } . Webkit-scrollbar::-webkit-scrollbar-track { background-color: transparent; / * Entire scrolling background color * / } . Webkit-scrollbar::-webkit-scrollbar-thumb { background-color: #9e9e9e; /*7px scroll bar background color * / Border-radius: 7px; Border: 1px solid #fff; } . Webkit-scrollbar::-webkit-scrollbar-thumb: Hover { background-color: #525252; }
Scroll bar style for WebKit kernel in CSS3