In this Article ,
We are going to see how to create a custom scrollbar using CSS.
Step-1: Create Html Code in the index.html file.
<div id="wrapper" style="margin-top:200px"> <div class="scrollbar" id="style-10"> Test 1 <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-11"> Test 2 <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-13"> Test 3 <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-14"> Test 4 <div class="force-overflow"></div> </div> </div>
Step-2: Add CSS in<style>….</style> tag on index.html file.
html { overflow: auto; } body { position: absolute; top: 10px; left: 20px; bottom: 10px; right: 0; padding: 30px; overflow-y: scroll; overflow-x: hidden; } div { height: 1000px; } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-color: #ebebeb; -webkit-border-radius: 10px; border-radius: 10px; } ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #6d6d6d; }
Step-3: Add Javascript in<script>….</script> tag on index.html file.
$(document).ready(function () { if (!$.browser.webkit) { $('.wrapper').html('<p>Sorry! Non webkit users. :(</p>'); } });
Output: