How to use nice scroll plug-in of jQuery

Nicescoll scrollbar plug-in is a very powerful scrollbar plug-in based on jQuery. It does not need to add extra css, and is almost browser compatible. ie6 +, the implementation only needs a piece of code, with very little invasion, completely customizable style, support for touch events, and can be used on the touch screen.

Nicescoll official website:

Simplest usage:


Hide scroll bar:


Check if the scroll bar is resized (when the window changes size)


Scroll to a location

$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

Various parameters can be added

 function() { 

Detailed configuration parameters:

 1 $("#thisdiv").niceScroll({
 2     cursorcolor: "#424242", // Change the scroll bar color to use the hexadecimal color value
 3     cursoropacitymin: 0, // Change transparency when scroll bar is hidden, Value range 1 to 0
 4     cursoropacitymax: 1, // Change transparency when scroll bar is in display state, Value range 1 to 0
 5     cursorwidth: "5px", // Width of scroll bar, unit: convenience
 6     cursorborder: "1px solid #fff", // CSS How to define the scroll bar border
 7     cursorborderradius: "5px", // Scroll bar fillet (pixels)
 8     zindex: "auto" | <number>, // Change the DIV Of z-index value
 9     scrollspeed: 60, // Rolling speed
10     mousescrollstep: 40, // Scroll speed of mouse wheel (pixel)
11     touchbehavior: false, // Activate drag and roll
12     hwacceleration: true, // Activate hardware acceleration
13     boxzoom: false, // Activate zoom in box Content of
14     dblclickzoom: true, // (Only when boxzoom=true Effective at)double-click box Zoom in
15     gesturezoom: true, // (only boxzoom=true And touch screen device) Activate zoom when out/in(Two fingers outstretched or contracted)
16     grabcursorenabled: true // (Only when touchbehavior=true) Show grab Icon display "grab" icon
17     autohidemode: true, // How to hide scroll bars, Available values: 
18      true | // Hide without scrolling
19      "cursor" | // hide
20      false | // Don't hide,
21      "leave" | // Hide only when pointer leaves content
22      "hidden" | // Always hidden
23      "scroll", // Show only when scrolling    
24     background: "", // Track background color
25     iframeautoresize: true, // Reset automatically when loading events iframe Size
26     cursorminheight: 32, // Set the minimum height of the scroll bar (pixel)
27     preservenativescrolling: true, // You can use the mouse to scroll the scrollbar in the scrollable area and add mouse wheel events
28     railoffset: false, // have access to top/left To correct the position
29     bouncescroll: false, // (only hw accell) Enable content movement by scrolling
30     spacebarenabled: true, // Scroll page down when space is pressed
31     railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // Set the inner spacing of the track
32     disableoutline: true, // One use in election nicescroll Of div At that time, chrome Disabled in browser outline
33     horizrailenabled: true, // nicescroll Can manage horizontal scrolling
34     railalign: right, // Align vertical rails
35     railvalign: bottom, // Align horizontal rails
36     enabletranslate3d: true, // nicescroll have access to CSS Variant to scroll content
37     enablemousewheel: true, // nicescroll Can manage mouse wheel events
38     enablekeyboard: true, // nicescroll Can manage keyboard events
39     smoothscroll: true, // ease Animation scrolling
40     sensitiverail: true, // Click the track to generate scrolling
41     enablemouselockapi: true, // Can be locked with the mouse API Title (Drag similar objects)
42     cursorfixedheight: false, // Fix the height of the cursor in pixels
43     hidecursordelay: 400, // Set scroll bar fade delay time (MS)
44     directionlockdeadzone: 6, // Set deadband, lock for active direction (pixels)
45     nativeparentscrolling: true, // Detect content at the bottom for parent scrolling
46     enablescrollonselection: true, // Activate content auto scrolling when text is selected
47     cursordragspeed: 0.3, // Set drag speed
48     rtlmode: "auto", // DIV 's horizontal scrolling starts on the left
49     cursordragontouch: false, // Use touch screen mode to drag
50     oneaxismousemode: "auto", // You can use the mouse wheel to scroll when only horizontal scrolling is available. If it is set to false Horizontal scrolling is not supported if set to auto Supports two axis scrolling
51     scriptpath: "" // by boxmode Picture custom path ("" => same script path)
52     preventmultitouchscrolling: true // Prevent rolling caused by multi contact events
53   });


Note: when using multiple nicescroll plug-ins on the same page, you need to hide the exhausted nicescroll objects in time. When loading, you need to show and then resize.

When the plug-in is placed in a container with absolute floating and the top value is set, there will be problems with the plug-in's top. To solve this problem, use the plug-in's railoffset property:

railoffset, you can add offset top/left for rail position (default:false)

Tags: Javascript JQuery

Posted on Mon, 04 May 2020 06:59:35 -0400 by mcrbids