Webkit scrollbar example

by Greg Bowler

HTML

<!doctype html>
<html>
<head>
</head>
<body>
    
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus sagittis condimentum. Cras at lectus tellus. Suspendisse vehicula posuere velit at tincidunt. Vivamus vestibulum, dolor vel dictum ullamcorper, massa nibh aliquet ante, in vestibulum elit sem vitae nunc. Donec tempor, magna in ultricies vehicula, dui enim tempor elit, sed eleifend mi risus et ante. Donec et metus quis libero ultricies viverra ac in nisi. Aenean cursus nulla a mauris euismod adipiscing. Donec id nulla a metus bibendum aliquet nec non tortor. Quisque sed nulla enim, eget euismod felis. Maecenas sagittis tortor at sem tempus fringilla. Suspendisse potenti. Nullam imperdiet rutrum metus eu auctor. Praesent ullamcorper consequat ornare. Sed quis massa mi, nec convallis nunc.
</p>
<p>
In ornare magna et dui scelerisque accumsan. In hendrerit orci at eros rhoncus molestie. Sed ac metus arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus in lorem tortor, nec facilisis nunc. Integer eu elit in purus tincidunt sagittis. Vestibulum vitae tortor id neque ornare consectetur vel et massa. Integer facilisis vulputate odio nec sodales. Proin ullamcorper, turpis mollis rutrum feugiat, turpis dolor pellentesque neque, in dictum nisi nunc in dui. Nullam a orci libero, sit amet bibendum ante.
</p>
<p>
Cras vulputate placerat posuere. Quisque vel sapien nec felis tempus molestie. Nulla sed ornare mauris. Proin luctus commodo est, ac eleifend lectus laoreet iaculis. Curabitur id leo sem. Ut sit amet urna elit, a interdum neque. Aliquam erat volutpat. Phasellus ultrices, lacus vitae pharetra venenatis, quam magna dignissim tortor, id ullamcorper nunc libero pulvinar magna. Sed eu tempor lorem. Morbi cursus nisl ac turpis pulvinar ullamcorper ac nec magna. Curabitur vel est...

CSS

::-webkit-scrollbar {
height:16px;
overflow:visible;
width:16px;
}

::-webkit-scrollbar-button {
height:0;
width:0;
}

::-webkit-scrollbar-track {
background-clip:padding-box;
border:solid transparent;
border-width:0 0 0 4px;
}

::-webkit-scrollbar-track:horizontal {
border-width:4px 0 0;
}

::-webkit-scrollbar-track:hover {
background-color:rgba(0,0,0,.05);
box-shadow:inset 1px 0 0 rgba(0,0,0,.1);
}

::-webkit-scrollbar-track:horizontal:hover {
box-shadow:inset 0 1px 0 rgba(0,0,0,.1);
}

::-webkit-scrollbar-track:active {
background-color:rgba(0,0,0,.05);
box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07);
}

::-webkit-scrollbar-track:horizontal:active {
box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07);
}

.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
background-color:rgba(255,255,255,.1);
box-shadow:inset 1px 0 0 rgba(255,255,255,.2);
}

.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
background-color:rgba(255,255,255,.1);
box-shadow:inset 1px 0 0 rgba(255,255,255,.25),inset -1px 0 0 rgba(255,255,255,.15);
}

.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(255,255,255,.15);
}

::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,.2);
background-clip:padding-box;
border:solid transparent;
min-height:28px;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
border-width:1px 1px 1px 6px;
padding:100px 0 0;
}

::-webkit-scrollbar-thumb:horizontal {
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.07);
border-width:6px 1px 1px;
padding:0 0 0 100px;
}

::-webkit-scrollbar-thumb:hover {
background-color:rgba(0,0,0,.4);
box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
}

::-webkit-scrollbar-thumb:active {
background-color:rgba(0,0,0,0.5);
box-shadow:inset 1px 1px 3px...