Use of nice scroll plug-in

Posted by sonicfusion on Sat, 25 Apr 2020 16:38:56 +0200

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:

To import core files, plug-ins need to import jquery libraries of version 1.5.X and above

The simplest usage is as follows:

  function() { 

Note: be sure to initialize it in $(document).ready!

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() { 

Configuration parameter table

        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)

Topics: JQuery