How To Create Custom Scrollbar

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: