Custom scrollbars demo - https://devzhen.github.io/dg-custom-scrollbars

Installation

• npm: npm install dg-custom-scrollbars
• Bower: bower install dg-custom-scrollbars

How to use it

• Include 'dg-custom-scrollbars.min.css' in the head tag your HTML document:

  <link rel="stylesheet" href="/path/to/dist/css/dg-custom-scrollbars.min.css" />

• Include 'dg-custom-scrollbars.min.js' in your HTML document:

  <script src="/path/to/dist/js/dg-custom-scrollbars.min.js"></script>

• Usage:

  var textarea = document.getElementById('some_id');
  
  var cs = new CustomScrollbar(textarea);

  var cs = new CustomScrollbar(document.body);

  cs - is a javascript object, that provides methods:

  • cs.createYScrollbar() - creates | removes a custom vertical scroll bar. cs.removeYScrollbar()

  • cs.createXScrollbar() - creates | removes a custom horizontal scroll bar. cs.removeXScrollbar()

  • cs.setCssClassForVerticalSlider() - sets | removes the css class for the vertical slider. cs.removeCssClassForVerticalSlider()

  • cs.setCssClassForHorizontalSlider() - sets | removes the css class for the horizontal slider. cs.removeCssClassForHorizontalSlider()

  • cs.setIdForVerticalSlider() - sets | removes the id attribute for the vertical slider. cs.removeIdForVerticalSlider()

  • cs.setIdForHorizontalSlider() - sets | removes the id attribute for the horizontal slider. cs.removeIdForHorizontalSlider()

  also CustomScrollbar provides a static method:

  • CustomScrollbar.notifyAllCustomScrollbars() - this is a static method that notifies all scrollbars to update their positions