From: http://www.cnblogs.com/jinqi79731/p/nicescroll.html

Nicescroll scrollbar plug-in is a very powerful JQUERY-based scrollbar plug-in, which is almost browser-compatible without additional css. ie6 +, only a piece of code is needed to implement, the intrusion is very small, the style can be fully customized, support touch events, and can be used on the touch screen.

Official address: http://www.areaaperta.com/nicescroll/

Introducing core files, plug-ins need to introduce jquery libraries with versions above 1.5.X

The simplest uses are as follows:

1 $(document).ready(
2   function() { 
3     $("html").niceScroll();
4   }
5 );

Note: Be sure to initialize in $(document). read!

Hide scrollbars: (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 resize first.)

1 $("#mydiv").getNiceScroll().hide();

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

1 $("#mydiv").getNiceScroll().resize();

Scroll to a location:

1 $("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis; the first parameter is the position of the scroll, and the second is the time required to scroll.
2 $("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

Set various parameters:

 1 $("#thisdiv").niceScroll({
 2         cursorcolor: "#424242 ", // / Change the color of the scrollbar, using the hexadecimal color value
 3         cursoropacitymin: 0, // Change transparency when the scrollbar is hidden, ranging from 1 to 0
 4         cursoropacitymax: 1, // Change the transparency when the scrollbar is in the display state, ranging from 1 to 0
 5         cursorwidth: "5px", // Width of scroll bar, unit: convenience
 6         cursorborder: "1px solid #Define scrollbar borders in fff,//CSS mode
 7         cursorborderradius: "5px", // Scrollbar roundness (pixels)
 8         zindex: "auto" | <number>, // Change the z-index value of DIV for scrollbars
 9         scrollspeed: 60, // Rolling speed
10         mousescrollstep: 40, // Rolling speed of mouse wheel (pixels)
11         touchbehavior: false, // Activate drag-and-roll
12         hwacceleration: true, // Activate Hardware Acceleration
13         boxzoom: false, // Activate the contents of the enlarged box
14         dblclickzoom: true, // (valid only when box zoom = true) zoom in when double-clicking box
15         gesturezoom: true, // Activate zoom when out/in (two fingers are stretched or contracted)
16         grabcursorenabled: true // (Only when touchbehavior=true) Display the Grab icon display "grab" icon
17         autohidemode: true, // How to hide the scrollbar, available values: 
18           true | // Hiding without scrolling
19           "cursor" | // hide
20           false | // Don't hide.
21           "leave" | // Hide only when the pointer leaves the content
22           "hidden" | // Keep hidden
23           "scroll", // Display only when scrolling        
24         background: "", // Background color of track
25         iframeautoresize: true, // Automatically reset iframe size when loading events
26         cursorminheight: 32, // Set the minimum height (pixels) of the scrollbar
27         preservenativescrolling: true, // You can use the mouse to scroll the scrollbar of the scrollable area and add mouse wheel events.
28         railoffset: false, // You can use top/left to correct the position
29         bouncescroll: false, // (only HW accellell) Enables content movement with rolling jumps
30         spacebarenabled: true, // Scroll down the page when space is pressed
31         railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // Setting the Interior Spacing of Track
32         disableoutline: true, // When a div using nicescroll is selected, outline is disabled in chrome browser
33         horizrailenabled: true, // nicescroll can manage level scrolling
34         railalign: right, // Alignment of Vertical Orbits
35         railvalign: bottom, // Alignment of horizontal orbit
36         enabletranslate3d: true, // nicescroll can scroll content using CSS variants
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 on the track to scroll
41         enablemouselockapi: true, // API titles can be locked with the mouse (similar to object dragging)
42         cursorfixedheight: false, // Corrected cursor height (pixels)
43         hidecursordelay: 400, // Set the delay time for fading out of the scrollbar (milliseconds)
44         directionlockdeadzone: 6, // Set Dead Zone to Lock (Pixels) for Activation Direction
45         nativeparentscrolling: true, // Detecting the bottom of the content makes it easy for the parent to scroll
46         enablescrollonselection: true, // Activate automatic scrolling of content when selecting text
47         cursordragspeed: 0.3, // Set drag speed
48         rtlmode: "auto", // DIV Horizontal Scroll Begins on the Left
49         cursordragontouch: false, // Use touch screen mode to drag and drop
50         oneaxismousemode: "auto", // When only scrolling horizontally, you can use the mouse wheel to scroll, if set to false, it does not support horizontal scrolling, if set to auto, it supports double-axis scrolling.
51         scriptpath: "" // Customize paths for boxmode images ("=> same script path)
52         preventmultitouchscrolling: true // Prevent rolling caused by multi-contact events
53     });

When the plug-in is placed in a container with absolute float and the top value is set, the top of the plug-in will have problems. The solution is to use the railoffset property of the plug-in:

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

The problems I encounter in the course of use are as follows:

nicescroll scrollbars flicker when loading data, and scrollbars are used for absolutely positioned elements (such as drop-down boxes), especially for pages that need more scrollbars, resulting in confused locations. These problems require the setting of direct sub-elements for elements that set scrollbars. The official answer is:

So it should be set up as follows:

1 $('#addContent_scroll_wrap').niceScroll('#sumStackColumn',{'cursorcolor':'#686868','cursorborder':'none','smoothscroll': 'false','autohidemode':false});

But then we still find a problem. In the case of complex pages, the drop-down box may appear, but the scroll bar does not appear. The official statement is: when using multiple nicescroll plug-ins in the same page, we should hide the used nicescroll objects in time. When loading, we need to show and resize them first.

So resize() method is used to reset the scrollbar, but it must be noted that the selection of scrollbar objects here must not be wrong, otherwise it is invalid:

1 $('#addContent_scroll_wrap').getNiceScroll().show();
2 $('#addContent_scroll_wrap').getNiceScroll().resize();