Usage of Nicescroll scroll bar plug-in jQuery, jquerynicescroll
This article describes how to use the Nicescroll plug-in jQuery. The Nicescroll plug-in is a very powerful jQuery-based plug-in for details.
The Nicescroll scroll bar plug-in is a very powerful jQuery-based scroll bar plug-in that is almost fully browser compatible without additional css. Ie6 +, the implementation only requires a piece of code, the intrusion is very small, the style can be completely customized, support touch events, can be used on the touch screen.
Nicescroll official website address: http://www.areaaperta.com/nicescroll/
Introduce core files. The plug-in must introduce jquery libraries of version 1.5.X or later.
The simplest usage is as follows:
$(document).ready( function() { $("html").niceScroll(); });
Note: You must put it in $ (document). ready for initialization!
Hide a scroll bar
$("#mydiv").getNiceScroll().hide();
Check whether the size of the scroll bar is reset (when the window size changes)
$("#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 color of the scroll bar. Use the hexadecimal color value cursoropacitymin: 0. // change the transparency when the scroll bar is hidden, value Range: 1 to 0 cursoropacitymax: 1, // transparency is changed when the scroll bar is displayed, value range: 1 to 0 cursorwidth: "5px", // width of the scroll bar, unit: cursorborder: "1px solid # fff", // CSS defines the scroll bar border cursorborderradius: "5px", // zindex of the scroll bar rounded corner (pixel: "auto" | <number>, // change the z-index value of the DIV of the scroll bar. scrollspeed: 60, // The scroll speed is mousescrollstep: 40, // The scroll speed (pixel) of the mouse wheel touchbehavior: false, // activate the drag and drop operation to scroll hwacceleration: true, // activate the hardware acceleration boxzoom: false, // activate the enlarged box content dblclickzoom: true, // (valid only when boxzoom = true) double-click the box to enlarge gesturezoom: true, // (valid only for boxzoom = true and touch screen devices) Activate Zoom when out/in (two fingers open or contract) grabcursorenabled: true // (only when touchbehavior = true) display the "Snap" icon display "grab" icon autohidemode: true, // hide the scroll bar mode, available values: true | // hide "cursor" without scrolling | // hide false | // do not hide, "leave" | // hide "hidden" only when the pointer leaves the content | // always hide "scroll", // only Display background :"", // The background color of the track iframeautoresize: true, // The iframe size cursorminheight: 32 is automatically reset when an event is loaded. // set the minimum height (pixel) of the scroll bar preservenativescrolling: true, // you can scroll the scroll bar of the scroll area with the mouse and add the scroll wheel event railoffset: false, // you can use top/left to modify the position bouncescroll: false, // (only hw accell) Enable the content movement of the rolling jump spacebarenabled: true, // when the space is pressed, the page will scroll down to railpadding: {top: 0, right: 0, left: 0, bottom: 0}, // set the inner distance of the orbit disableoutline: true, // when you select a div using nicescroll, disable outline horizrailenabled: true in chrome, // nicescroll can manage horizontal scrolling railalign: right, // alignment vertical orbital railvalign: bottom, // alignment horizontal orbital enabletranslate3d: true, // nicescroll can use CSS variants to scroll the content enablemousewheel: true, // nicescroll can manage the mouse wheel event enablekeyboard: true, // nicescroll can manage Keyboard Events smoothscroll: true, // rotate animation rolling sensitiverail: true, // click the track to generate rolling enablemouselockapi: true, // you can use the mouse to lock the API title (like dragging an object) cursorfixedheight: false, // modify the height of the cursor (in pixels) hidecursordelay: 400, // set the delay time (in milliseconds) of the scroll bar fade-out directionlockdeadzone: 6, // set the dead zone to lock the direction of activation (in pixels) nativeparentscrolling: true, // at the bottom of the content to facilitate parent-level scrolling enablescrollonselection: true, // when selecting text, the activated content will automatically scroll cursordragspeed: 0.3, // set the drag speed rtlmode: "auto", // The horizontal scroll of the DIV starts from the left cursordragontouch: false, // use the touch screen mode to drag oneaxismousemode: "auto ", // you can use the scroll wheel to scroll horizontally. If it is set to false, horizontal scrolling is not supported. If it is set to auto, double-axis rolling is supported. scriptpath: "" // The custom path of the boxmode image ("" => same script path) preventmultitouchscrolling: true // prevents scrolling caused by multi-contact events });
Note: When multiple nicescroll plug-ins are used on the same page, you must promptly hide the used nicescroll object. to load the nicescroll, you must first show and then resize.
When the plug-in is placed in a container with absolute floating and the top value is set, the plug-in top will be faulty. The solution is to use the railoffset attribute of the plug-in:
railoffset, you can add offset top/left for rail position (default:false)
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.