<!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> <script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>
Output :
Topic :
CSS Scrollbars
