scrollbar-exscroll-plugin

Adding a Customizable, Responsive Scrollbar to An Overflowing Container | exScroll

by

exScroll is a lightweight JavaScript plugin for adding a responsive and customizable scrollbar to a site outside (but linked!) any redundant container.

custom scrollbar for all browsers, custom scrollbar css for div, custom scrollbar css for all browsers, overflow overlay, overlay scrollbar css, content overflowing out of div

How to make use of it:

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

<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 accomplished.

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;
}

Responsive Custom Scrollbar For Overflowing Content, exScroll Plugin/Github, overflow y scroll, overlay scrollbars

See Demo And Download

Download

Official Website(seanhay): Click Here

This superior jQuery/javascript plugin is developed by seanhay. For extra Advanced Usages, please go to the official website.

Leave a Comment