Webkit Scrollbars

Experimenting with Webkit Scrollbar CSS

by nirmaljpatel

HTML

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<div data-role="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
        <div id="container">
            <div id="content">
                <ol>
                    <li>Scrollbar occupies width from parent element</li>
                    <li>____</li>
                    <li>The scroll button visiblity is handled using JS and CSS by listening to touchstart and touchend events</li>
                    <li>____</li>
                    <li>Dont know a way to achieve the bounce effect.</li>
                    <li>____</li>
                </ol>
            </div>
        </div>
        <div id="container2">
            <div id="content">
                <ol>
                    <li>On Mobile Safari - no width is taken by the scrollbar</li>
                    <li>____</li>
                    <li>On Desktop Chrome - scrollbar consumes width from parent container</li>
                    <li>____</li>
                    <li>In-Built Bounce effects</li>
                    <li>____</li>
                </ol>
            </div>
        </div>
    </div>
</div>

CSS

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    display: none;
}
 
/* Handle */
#container::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    display: none;
}
#container.active::-webkit-scrollbar-thumb {
    display: block !important;
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}
#container, #container2 {
    border: thin solid red;
    height: 250px;
    width: 250px;
    overflow-x: none;
    overflow-y: scroll;
    display: inline-block;
}
#container2 {
    -webkit-overflow-scrolling: touch;
}
#content {
    height: 1000px;
    border: thin solid green;
}

JavaScript

$("#container").bind("touchstart", function(){
    console.log("touchstart occured...");
    $("#container").addClass("active");
});
$("#container").bind("touchend", function(){
    console.log("touchend occured");
    $("#container").removeClass("active");
    var div = $('<div>').appendTo($("#container")); setTimeout(function(){ div.remove(); }, 0);
});