Step-by-step Guide to Create a Custom Scrollbar in JavaScript: Scrollbot.js for Beginners

 Scrollbot.js is a smart javascript library for creating custom scrollbar for reading. It is created with pure javascript. In this tutorial, we will implement a custom scrollbar with some steps using Scrollbot.js.

View custom scrollbar demo

How to create a custom scrollbar using Scrollbot.js?

1. Import scrollbot.js first

<script src="scrollbot.js" type="text/javascript"></script>

2.Create a div container which will display a scrollbar

<div class="custom-scroll custom-scroll-default">
    <h1>Default Style</h1>
    <p>Lorem ipsum dolor si</p>
</div>
<div class="custom-scroll custom-scroll-1">
    <h1>Custom Style</h1>
    <p>Lorem ipsum dolor sit amet</p>
<div>

We will create two scrollbars on div custom-scroll-default and custom-scroll-1.

3.Create scrollbars using Scrollbot.js

Create a scrollbar with default style.

<script>
var custom = new Scrollbot(".custom-scroll-default");
</script>

Create a scrollbar with custom style.

<script>
custom2 = new Scrollbot(".custom-scroll-1",10).setStyle({
  "background":"#ff6600",
  "z-index":"2",
  "height":"30px"
},{
  "background":"rgba(0,0,0,0)"
});
var psuedo = document.createElement("div");
psuedo.style.cssText = "height:100%;width:2px;left:4px;background:#808080;position:absolute;z-index:1";
custom2.scrollBarHolder.appendChild(psuedo);
</script>

We can use css style to set the style of scrollbar.