Responsive Custom Scrollbar For Overflowing Content – exScroll

Preview:

Description:

exScroll is a JavaScript library that attaches a responsive, customizable scrollbar to the container whose inner content is overflowed.

How to use it:

1. Insert the stylesheet exscroll.css and JavaScript exscroll.js into the document.

<link rel=”stylesheet” href=”./dist/exscroll.css” />
<script src=”./dist/exScroll.js”></script>

2. Add the scrollbar to the container.

<div exscroll>
  <div exscroll-content>Inner Content</div>
  <div exscroll-scrollbar></div>
</div>

3. Initialize the exScroll and done.

let scroller = new exScroll();
exScroll();

4. Override the default selectors.

<div class="wrapper">
  <div class="content">
    <div class="inner"></div>
  </div>
  <div class="scrollbar"></div>
</div>

let scroller = new exScroll({
    wrapperName: ".wrapper",
    contentName: ".content",
    scrollerName: ".scrollbar",
});
exScroll();

5. Override the default styles of the scrollbar.

.exscroll-scrollbar {
  box-sizing: border-box;
  margin-top: 20px;
  width: calc(100% - 100px);
  margin-left: 50px;
  height: 12px;
  padding: 2px;
  border-radius: 9999px;
  background-color: #fff;
  border: 1px solid #aaa;
  position: relative;
}
.exscroll-dragger {
  display: block;
  width: 40px;
  height: 100%;
  background-color: #aaa;
  border-radius: 9999px;
  position: absolute;
  top: 0;
  cursor: pointer;
}