Usage of Nicescroll scroll bar plug-in jQuery, jquerynicescroll

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.