https://www.cnblogs.com/jinqi79731/p/nicescroll.html
Nicescoll scroll bar plug-in is a very powerful JQUERY based scroll bar plug-in, which does not need to add additional 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.
Official website: http://www.areaaperta.com/nicescoll/
To import core files, plug-ins need to import jquery libraries of version 1.5.X and above
The simplest usage is as follows:
$(document).ready( function() { $("html").niceScroll(); } );
Note: be sure to initialize it in $(document).ready!
Hide scroll bar
$("#mydiv").getNiceScroll().hide();
Check if the scroll bar is resized (when the window changes size)
$("#mydiv").getNiceScroll().resize();
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
$(document).ready( function() { $("#thisdiv").niceScroll({cursorcolor:"#00F"}); } );
Configuration parameter table
$("#thisdiv").niceScroll({ cursorcolor: "#424242 ", / / change the scroll bar color and use the hexadecimal color value cursoropacitymin: 0, // Change transparency when scroll bar is hidden, value range 1 to 0 cursoropacitymax: 1, // Change the transparency when the scroll bar is in the display state, with a value range of 1 to 0 cursorwidth: "5px", // Width of scroll bar, unit: convenience cursorborder: "1px solid #FFF ", / / define scroll bar border in CSS mode cursorborderradius: "5px", // Scroll bar fillet (pixels) zindex: "auto" | <number>, // Change the z-index value of DIV of scroll bar scrollspeed: 60, // Rolling speed mousescrollstep: 40, // Scroll speed of mouse wheel (pixels) touchbehavior: false, // Activate drag and roll hwacceleration: true, // Activate hardware acceleration boxzoom: false, // Activate and enlarge the contents of the box dblclickzoom: true, // (only valid if boxzoom=true) double click box to zoom in gesturezoom: true, // (valid only when boxzoom=true and touch screen device) activate zoom when out/in grabcursorenabled: true // (only if touchbehavior=true) display "grab" icon autohidemode: true, // To hide the scroll bar, available values: true | // Hide without scrolling "cursor" | // hide false | // Don't hide, "leave" | // Hide only when pointer leaves content "hidden" | // Always hidden "scroll", // Show only when scrolling background: "", // Track background color iframeautoresize: true, // Automatically reset iframe size when loading events cursorminheight: 32, // Set the minimum height of the scroll bar in pixels preservenativescrolling: true, // You can use the mouse to scroll the scrollbar in the scrollable area and add mouse wheel events railoffset: false, // You can use top/left to correct the position bouncescroll: false, // (only HW access) enable the content movement of rolling jump spacebarenabled: true, // Scroll page down when space is pressed railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // Set the inner spacing of the track disableoutline: true, // When you select a div using nicescoll, outline is disabled in the chrome browser horizrailenabled: true, // Nice scroll can manage horizontal scrolling railalign: right, // Align vertical rails railvalign: bottom, // Align horizontal rails enabletranslate3d: true, // Nicescoll can use CSS variants to scroll content enablemousewheel: true, // Nice scroll can manage mouse wheel events enablekeyboard: true, // Nicescoll can manage keyboard events smoothscroll: true, // ease animation scrolling sensitiverail: true, // Click the track to generate scrolling enablemouselockapi: true, // You can lock the API title with the mouse (similar to object drag) cursorfixedheight: false, // Fix the height of the cursor in pixels hidecursordelay: 400, // Set scroll bar fade delay time (MS) directionlockdeadzone: 6, // Set deadband, lock for active direction (pixels) nativeparentscrolling: true, // Detect content at the bottom for parent scrolling enablescrollonselection: true, // Activate content auto scrolling when text is selected cursordragspeed: 0.3, // Set drag speed rtlmode: "auto", // Horizontal scrolling of DIV starts from the left cursordragontouch: false, // Use touch screen mode to drag oneaxismousemode: "auto", // When only horizontal scrolling is available, you can use the mouse wheel to scroll. If it is set to false, horizontal scrolling is not supported. If it is set to auto, two axis scrolling is supported scriptpath: "" // Custom path for boxmode picture ("= > same script path) preventmultitouchscrolling: true // Prevent rolling caused by multi contact events });
Note: when using multiple nicescoll plug-ins in the same page, you need to hide the used nicescoll objects in time. When loading, you need to show and resize first.
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)