JSFiddle - React, Tailwind, and code Playground
HTML
<div style="width:1000px; height:1000px">
Hi scrollbar!
</div>
CSS
::-webkit-scrollbar {
width:15px;
height:15px;
}
::-webkit-scrollbar-corner {
background-image:url(http://help.apple.com/mobileme/images/corner.png);
background-repeat:no-repeat;
}
::-webkit-resizer {
background-image:url(http://help.apple.com/mobileme/images/resizer.png);
background-repeat:no-repeat;
background-position:bottom right;
}
::-webkit-scrollbar-button:start {
display:none;
}
::-webkit-scrollbar-button:end {
display:block;
}
::-webkit-scrollbar:horizontal {
-webkit-border-image:url(http://help.apple.com/mobileme/images/horizontal-button.png) 0 2 0 2;
border-color:transparent;
border-width:0 2px;
background-image:url(http://help.apple.com/mobileme/images/horizontal-button-background.png);
background-repeat:repeat-x;
}
::-webkit-scrollbar:horizontal:corner-present {
border-right-width:0;
}
::-webkit-scrollbar-thumb:horizontal {
-webkit-border-image:url(http://help.apple.com/mobileme/images/horizontal-thumb.png) 0 15 0 15;
border-color:transparent;
border-width:0 15px;
min-width:20px;
}
::-webkit-scrollbar-track-piece:horizontal:start {
margin-left:6px;
}
::-webkit-scrollbar-track-piece:horizontal:end {
margin-right:-6px;
}
::-webkit-scrollbar-track-piece:horizontal:decrement {
-webkit-border-image:url(http://help.apple.com/mobileme/images/horizontal-track.png) 0 15 0 15;
border-color:transparent;
border-width:0 0 0 15px;
}
::-webkit-scrollbar-track-piece:horizontal:increment {
-webkit-border-image:url(http://help.apple.com/mobileme/images/horizontal-track.png) 0 15 0 15;
border-color:transparent;
border-width:0 15px 0 0;
}
::-webkit-scrollbar-button:horizontal {
width:21px;
-webkit-border-image:url(http://help.apple.com/mobileme/images/horizontal-button.png) 0 2 0 2;
border-color:transparent;
border-width:0 2px;
}
::-webkit-scrollbar-button:horizontal:decrement {
background-image:url(http://help.apple.com/mobileme/images/horizontal-decrement-arrow.png),...