Custom Scrollbar JavaScript Library – WellScroller

Preview:

Description:

WellScroller is a native JavaScript library for replacing the default browser scrollbar with momentum scrolling support.

Basic usage:

First you need to load the WellScroller at the bottom of the webpage for faster page loading.

<script src="WellScroller.min.js"></script>

Wrap your content into DIV elements like this:

<div class="scrollBox">
  <div class="viewport">
    <div class="overview">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu leo at dolor mattis rutrum. Nulla facilisi. Nulla ut venenatis nibh. Morbi facilisis feugiat urna. Mauris vitae lacus a quam pretium vestibulum. Mauris accumsan turpis egestas tristique tempus. Vestibulum commodo posuere ultrices. In ultricies pellentesque euismod. Quisque egestas diam et mauris consequat consequat. In nulla nulla, dictum eu dictum sollicitudin, scelerisque vel libero. Mauris sed metus dui. Integer suscipit metus et ipsum sagittis efficitur.</p>
      <p>Donec malesuada nisl tortor, sed placerat tellus pulvinar id. Aliquam sodales erat eget nisi elementum, nec elementum lectus facilisis. In convallis euismod vulputate. Sed non libero ac enim feugiat convallis vel sit amet eros. Suspendisse sodales venenatis nunc, eget tempor odio pulvinar in. Ut gravida nec magna consectetur elementum. Praesent et ipsum vulputate, auctor eros in, venenatis diam. Sed pellentesque enim eget lectus imperdiet volutpat. Nulla luctus at quam luctus tempus. Proin tempus iaculis elit a rutrum.</p>
      <p>Quisque tincidunt tempus justo, vel sodales metus accumsan quis. Maecenas aliquam fringilla sem ut malesuada. Nulla facilisi. Nunc faucibus eros ex, sed hendrerit sem facilisis a. Pellentesque sed tristique felis, viverra rutrum ante. Curabitur vel nibh sapien. Curabitur sit amet nisi mi.</p>
      <p>In vestibulum nec sapien id porttitor. Nullam mattis gravida vestibulum. Proin ornare vel felis eu faucibus. Etiam eleifend odio sed ligula ultrices elementum. Proin vitae dolor sed erat consectetur pellentesque volutpat facilisis ligula. Nunc justo metus, lobortis et semper sit amet, dapibus ullamcorper erat. Nam lacinia lobortis sapien et varius.</p>
      <p>Nam id nulla nisl. Sed elementum enim quis tortor feugiat, ac luctus lectus luctus. Mauris enim felis, sodales vitae euismod eu, aliquam et nisl. Nulla at nulla ac purus rutrum malesuada. Praesent congue quam odio, faucibus luctus ante iaculis eget. Nullam efficitur est ut lobortis faucibus. Sed a diam placerat augue ornare faucibus ac id orci. Morbi convallis tincidunt rhoncus. Aliquam in arcu eget lacus semper cursus id at dui. Fusce convallis pretium diam sed finibus. Sed vel magna vitae risus mattis cursus. Nullam placerat, ex sagittis ullamcorper lacinia, orci leo egestas nibh, a lacinia mauris orci eget ligula. Maecenas ultrices quam urna, ut bibendum lectus varius eget.</p>
    </div>
  </div>
  <div class="scrollbar">
    <div class="thumb"></div>
  </div>
</div>

The required CSS styles for the custom scrollbar.

.scrollBox {
  position: relative;
  display: flex;
  overflow: hidden;
}
.scrollBox .viewport {
  height: auto;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.scrollBox .overview {
  height: 100%;
  position: relative;
  width: 100%;
  transition: all 0.5s;
}
.scrollBox .scrollbar {
  width: 10px;
  border: 1px solid #E6E6E6;
  border-radius: 15px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.scrollBox .scrollbar.disable { display: none; }
.scrollBox .thumb:hover, .scrollBox .thumb:active { background-color: #0059B3; }
.scrollBox .thumb {
  width: 8px;
  left: 0;
  top: 0;
  background-color: #999999;
  border-radius: 15px;
  cursor: pointer;
  position: absolute;
  transition: all 0.5s;
}

Make the ‘scollbox’ scrollable.

.scrollBox {
  max-height: 470px;
  width: 350px;
  margin: 0 auto;
}

Initialize the WellScroller.

wellScroller(document.querySelector('.scrollBox'));

Default configuration options.

wellScroller(document.querySelector('.scrollBox'),{
  // axis of scroller orientation
  axis: 'y',
  // Wheel speed modifier
  wheelSpeed: 40,
  // Lock default window wheel scrolling when there is no more content to scroll.
  wheelLock: true,
  // Lock default window touch scrolling when there is no more content to scroll.
  touchLock: true,
  trackSize: false,
  // Set the size of the thumb to auto(false) or a fixed number
  thumbSize: false,
  // Minimum thumb size
  thumbSizeMin: 20,
  // Use 'margin-top' or 'top' to elements position
  marginTop: false,
  // Use 'margin-left' or 'left' to elements position
  marginLeft: false,
  // Scroll Down Element for scroll down button possibility
  scrollDownBtn : null,
  scrollDownBtnStep: 4
  
});