<!DOCTYPE html>
<html>
<head>
<title>CSS Scroll Bars</title>
<style type="text/css">
.scrollbar{
margin-left: 20px;
float: left;
height: 300px;
width: 45px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow{min-height: 450px; }
#wrapper {text-align: center; width: 100%; margin: auto; }
#style-1::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 5px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
#style-2::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
#style-3::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar{
width:6px; background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb{
background-color: #000000;
}
#style-4::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar{
width: 10px; background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}
</style>
<script type="text/javascript">
$(document).ready(function () {
if (!$.browser.webkit) {
$('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');
}
});
</script>
</head>
<body>
<div id="wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-3">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-4">
<div class="force-overflow"></div>
</div>
</div>
</body>
</html>