<!DOCTYPE html> <html> <head> <title>CSS Scrollbars</title> </head> <body> <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> <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>
Output :
Topic :
CSS Scrollbars
