Of Stack

How to use jquery scroll bar plug in slimScroll

  • 2021-07-18 06:35:57
  • OfStack

This article summarizes the use of scroll bar plug-in slimScroll for your reference, the specific contents are as follows

Download address of simScroll plug-in project: https://github.com/rochal/jQuery-slimScroll

TIP:

1. slimScroll depends on JQ when it is used, so it is necessary to introduce JQ and then introduce simScroll plug-in when it is used for the first time
2. Recall the plug-in when resize is not supported, but someone has modified the source code. This is the download address of the modified version: https://github.com/kujian/jQuery-slimScroll

resize recalls the added code part of the plug-in: 


function setScroll(){
 $(".box-list").slimScroll({
  height: boxHeight,
  alwaysVisible: true,
 });
}

setScroll();

$(window).on("resize",setScroll);

Call of plug-in and parameter setting: 


$(function() {
 $(".slimscroll").slimScroll({
  width: 'auto', // Width of scrollable area 
  height: '100%', // Height of scrollable area 
  size: '10px', // Component width 
  color: '#000', // Scroll bar color 
  position: 'right', // Component location: left/right
  distance: '0px', // Distance between component and side 
  start: 'top', // Default scroll position: top/bottom
  opacity: .4, // Scroll bar transparency 
  alwaysVisible: true, // Whether or not   Always show components 
  disableFadeOut: false, // Whether or not   Show components when the mouse passes through the scrollable area and hide components when the mouse leaves 
  railVisible: true, // Whether or not   Show track 
  railColor: '#333', // Track color 
  railOpacity: .2, // Track transparency 
  railDraggable: true, // Whether or not   The scroll bar can be dragged 
  railClass: 'slimScrollRail', // Orbit div Class name  
  barClass: 'slimScrollBar', // Scroll bar div Class name 
  wrapperClass: 'slimScrollDiv', // Outsourcing div Class name 
  allowPageScroll: true, // Whether or not   Use the roller to reach the top / Bottom, scroll the window 
  wheelStep: 20, // Rolling quantity of roller 
  touchScrollStep: 200, // Scroll when the user uses gestures 
  borderRadius: '7px', // Scroll bar fillet 
  railBorderRadius: '7px' // Track fillet 
 });
});

slimScroll Event--Triggers when the scroll bar reaches the top or bottom of the parent container: 


$(selector).slimScroll().bind('slimscroll', function(e, pos){
 console.log("Reached " + pos");
});

Full example: 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>slimScroll Examples of plug-in use </title>
</head>
<body>
 
 <div class="superDiv"> 
  <div id="innerDiv"> 
   <p>xxxxxxxxxxxxxx</p> 
  </div> 
 </div> 
 
 
 <script src="jquery.min.js"></script>
 <script src="jquery.slimscroll.js"></script>
 <script>
 
  $(function(){ 
   $('#innerDiv').slimScroll({ 
    height: '250px' 
   });
   
   $('#innerDiv').slimScroll().bind('slimscroll', function(e, pos){ 
    if(pos=='bottom'){
     //  Execute additional logic 
    }
   }); 
  }); 
  
 </script>
</body>
</html>
Related articles: