Customizable Touch-enabled Scrollbar Plugin - cuteScroll

Customizable Touch-enabled Scrollbar Plugin - cuteScroll

The jQuery cuteScroll plugin helps you append a responsive, touch-enabled and highly customizable scrollbar to any scrollable element or the whole document.

1. Load the minified version of the jQuery cuteScroll plugin after loading jQuery JavaScript.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.cutescroll.min.js"></script>

2. Initialize the plugin on the target element.

$('.scroll').cuteScroll();

3. Customize the scrollbar with the following options.

$('.scroll').cuteScroll({
  // bar options
  barColor: "black",
  barHeight: false,
  barWidth: false,
  barMinHeight: "6rem",
  barMaxHeight: "auto",
  barOpacity: 0.4,
  barBorderRadius: "1rem",
  barDraggable: true,
  barClass: "cuteScroll-bar",
  // rail options
  railColor: "black",
  railWidth: false,
  railIndent: false,
  railOpacity: 0.1,
  railBorderRadius: "1rem",
  railVisible: false,
  railClass: "cuteScroll-rail",
  // scroller options
  scrollerIndent: "0.1rem",
  scrollerPosition: "right",
  scrollerWidth: "0.4rem",
  scrollerAlwaysVisible: false,
  scrollerHideDelay: 1000,
  scrollerFadeOutSpeed: "slow",
  scrollerFadeInSpeed: "fast",
  // scroll the window if we reach top/bottom
  pageScroll: true,
  // step size
  wheelStep: 120,
  // touch options
  touchSwipeStrengthFactor: 1.25,
  touchSwipeFadingFactor: 0.075,
  touchSwipeVelocityThreshold: 0.5,
  touchSwipeDistanceThreshold: 10,
  touchSwipeTimeAdjustmentThreshold: 500,
  touchSwipeIterationMinDistance: 0.2,
  touchSwipeIterationTimeout: 5,
  touchMoveFactor: 1.1,
  // height/width
  height: "20rem",
  width: "100%",
  // additional class(es)
  addClass: false,
  // removes classes on remove
  removeClass: false,
  addCss: false,
  // additional CSS
  removeCss: false,
  // class name of wrapper
  wrapperClass: "cuteScroll-wrapper",
  // callbacks
  onContentChange: false,
  onContentChangeShow: true,
  // removes the scrollbar
  remove: false,
  // scrolls the page to the top
  jumpToTop: false,
  // scrolls the page to the bottom
  jumpToBottom: false,
  // alert message
  alert: false
  
});

This awesome jQuery plugin is developed by MerryPanda. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 22.12.2017
  • Source