How to use niceScroll.Js
Nice Scroll is a simple jQuery plugin that replaces your browser’s default scroll bar with a custom scroll bar which you can fully customize.
- Compatible with all desktop browser: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers)
- Compatible with mobile device: iPad/iPhone/iPod, Android 2.2+, Blackberry phones and Playbook (WebWorks/Table OS), Windows Phone 7.5 Mango and Windows Phone 8
- Compatible with all touch devices: iPad, Window Surface.
- Compabible with multi-input device (mouse with touch or pen): Window Surface, Chrome Desktop on touch notebook.
- Compatible with 2 directions mice: Apple Magic Mouse, Apple Mouser with 2-dir wheel, PC mouse with 2-dir wheel (if browser support it).
CDN:
1 | <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.5.1/jquery.nicescroll.min.js"></script> |
Very easy to integrate, simply copy the CDN on the header part of your website then add this additional script just bellow the CDN:
1 2 3 | $(document).ready(function() { $("html").niceScroll({cursorwidth: '10px', autohidemode: false, zindex: 999 }); }); |
Replace “html” with whatever element you wish to integrate niceScroll.
To customize the appearance and behavior, use these parameters:
- cursorcolor – change cursor color in hex, default is “#000000”
- cursoropacitymin – change opacity very cursor is inactive (scrollabar “hidden” state), range from 1 to 0, default is 0 (hidden)
- cursoropacitymax – change opacity very cursor is active (scrollabar “visible” state), range from 1 to 0, default is 1 (full opacity)
- cursorwidth – cursor width in pixel, default is 5 (you can write “5px” too)
- cursorborder – css definition for cursor border, default is “1px solid #fff”
- cursorborderradius – border radius in pixel for cursor, default is “4px”
- zindex – change z-index for scrollbar div, default value is 9999
- scrollspeed – scrolling speed, default value is 60
- mousescrollstep – scrolling speed with mouse wheel, default value is 40 (pixel)
- touchbehavior – enable cursor-drag scrolling like touch devices in desktop computer (default:false)
- hwacceleration – use hardware accelerated scroll when supported (default:true)
- boxzoom – enable zoom for box content (default:false)
- dblclickzoom – (only when boxzoom=true) zoom activated when double click on box (default:true)
- gesturezoom – (only when boxzoom=true and with touch devices) zoom activated when pitch out/in on box (default:true)
- grabcursorenabled, display “grab” icon for div with touchbehavior = true, (default:true)
- autohidemode, how hide the scrollbar works, true=default / “cursor” = only cursor hidden / false = do not hide
- background, change css for rail background, default is “”
- iframeautoresize, autoresize iframe on load event (default:true)
- cursorminheight, set the minimum cursor height in pixel (default:20)
- preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)
- railoffset, you can add offset top/left for rail position (default:false)
- bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)
- spacebarenabled, enable page down scrolling when space bar has pressed (default:true)
- railpadding, set padding for rail bar (default:{top:0,right:0,left:0,bottom:0})
- disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)
- horizrailenabled, nicescroll can manage horizontal scroll (default:true)
- railalign, alignment of vertical rail (defaul:”right”)
- railvalign, alignment of horizontal rail (defaul:”bottom”)
- enabletranslate3d, nicescroll can use css translate to scroll content (default:true)
- enablemousewheel, nicescroll can manage mouse wheel events (default:true)
- enablekeyboard, nicescroll can manage keyboard events (default:true)
- smoothscroll, scroll with ease movement (default:true)
- sensitiverail, click on rail make a scroll (default:true)
- enablemouselockapi, can use mouse caption lock API (same issue on object dragging) (default:true)
- cursorfixedheight, set fixed height for cursor in pixel (default:false)
- hidecursordelay, set the delay in microseconds to fading out scrollbars (default:400)
- directionlockdeadzone, dead zone in pixels for direction lock activation (default:6)
- nativeparentscrolling , detect bottom of content and let parent to scroll, as native scroll does (default:true)
- enablescrollonselection, enable auto-scrolling of content when selection text (default:true)
Reference: http://areaaperta.com/nicescroll/
Do you need help with a project? or have a new project in mind that you need help with?
Contact Me