Top Related Projects
A jQuery plugin that offers a simplistic way of implementing Lion OS scrollbars.
A lightweight script to animate scrolling to anchor links.
No longer actively maintained.
Lightweight, cross-browser and highly customizable animated scrolling with jQuery
the last carousel you'll ever need
Quick Overview
jQuery.nicescroll is a custom scrollbar plugin for jQuery that replaces the default browser scrollbar with a customizable, smooth-scrolling alternative. It offers enhanced functionality and aesthetics, allowing developers to create more visually appealing and interactive scrollable areas on web pages.
Pros
- Highly customizable with numerous options for appearance and behavior
- Smooth scrolling experience across different browsers and devices
- Supports touch devices and responds to gestures
- Lightweight and easy to implement
Cons
- Requires jQuery, which may not be ideal for modern projects moving away from jQuery
- Can potentially impact performance on pages with many scrollable elements
- May not perfectly mimic native scrollbar behavior in all scenarios
- Limited updates in recent years, which could lead to compatibility issues with newer browsers
Code Examples
- Basic initialization:
$(document).ready(function() {
$("html").niceScroll();
});
This code initializes nicescroll on the entire page.
- Customizing scrollbar appearance:
$("#mydiv").niceScroll({
cursorcolor: "#00F",
cursorwidth: "10px",
background: "#ccc",
cursorborder: "1px solid #fff",
cursorborderradius: "5px"
});
This example customizes the scrollbar's color, width, background, border, and border radius.
- Enabling smooth scrolling:
$(".scrollable-content").niceScroll({
smoothscroll: true,
scrollspeed: 60,
mousescrollstep: 40
});
This code enables smooth scrolling with custom speed settings for mouse and keyboard scrolling.
Getting Started
- Include jQuery and the nicescroll plugin in your HTML:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.nicescroll.min.js"></script>
- Initialize nicescroll in your JavaScript:
$(document).ready(function() {
$("html").niceScroll({
cursorcolor: "#333",
cursorborder: "0px",
cursorwidth: "8px",
zindex: "9999"
});
});
This basic setup will apply nicescroll to the entire page with some custom styling. Adjust the options as needed for your specific use case.
Competitor Comparisons
A jQuery plugin that offers a simplistic way of implementing Lion OS scrollbars.
Pros of nanoScrollerJS
- Lightweight and performant, with a smaller file size
- Supports touch devices and smooth scrolling out of the box
- Easier to customize appearance with CSS
Cons of nanoScrollerJS
- Less actively maintained, with fewer recent updates
- More limited feature set compared to jquery.nicescroll
- May require additional plugins for some advanced functionality
Code Comparison
nanoScrollerJS:
$(".nano").nanoScroller({
alwaysVisible: true,
preventPageScrolling: true
});
jquery.nicescroll:
$("html").niceScroll({
cursorcolor: "#00F",
cursorwidth: "10px",
zindex: 999
});
Both libraries offer simple initialization, but jquery.nicescroll provides more options for customization directly in the JavaScript code. nanoScrollerJS relies more on CSS for styling, which can be seen as an advantage or disadvantage depending on the developer's preference.
nanoScrollerJS is generally more suited for simpler projects or those prioritizing performance, while jquery.nicescroll offers more features and flexibility for complex scrolling requirements. The choice between the two depends on the specific needs of the project and the developer's preferences for customization and maintenance.
A lightweight script to animate scrolling to anchor links.
Pros of smooth-scroll
- Lightweight and dependency-free, making it easier to integrate into projects
- Supports both modern and older browsers without requiring jQuery
- Offers more customization options for easing functions and scroll behavior
Cons of smooth-scroll
- Lacks advanced scrollbar customization features
- May require more manual setup for complex scrolling scenarios
- Does not provide built-in touch support for mobile devices
Code Comparison
smooth-scroll:
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 500,
easing: 'easeInOutCubic'
});
jquery.nicescroll:
$(document).ready(function() {
$("html").niceScroll({
cursorcolor: "#000",
cursorwidth: "10px",
cursorborder: "1px solid #fff"
});
});
Key Differences
- smooth-scroll focuses on smooth scrolling to anchor points, while jquery.nicescroll primarily customizes the scrollbar appearance
- jquery.nicescroll requires jQuery, whereas smooth-scroll is a standalone library
- smooth-scroll offers more flexibility in scroll behavior, while jquery.nicescroll provides extensive scrollbar styling options
Use Cases
- Choose smooth-scroll for lightweight, dependency-free smooth scrolling to page anchors
- Opt for jquery.nicescroll when advanced scrollbar customization is a priority and jQuery is already part of the project
No longer actively maintained.
Pros of Remodal
- Lightweight and simple modal plugin with no dependencies
- Responsive design and mobile-friendly out of the box
- Easy customization with CSS variables
Cons of Remodal
- Limited built-in features compared to more complex scrolling solutions
- May require additional JavaScript for advanced functionality
- Less suitable for complex scrolling scenarios or large content areas
Code Comparison
Remodal (initialization):
$('[data-remodal-id=modal]').remodal();
jquery.nicescroll (initialization):
$("html").niceScroll({
cursorcolor: "#ccc",
cursorwidth: "5px",
cursorborder: "none"
});
Both libraries offer simple initialization, but jquery.nicescroll provides more options for customization directly in the JavaScript code. Remodal focuses on simplicity and relies more on CSS for styling and customization.
Remodal is better suited for creating modal dialogs and popups, while jquery.nicescroll specializes in enhancing scrollbars and scroll behavior. The choice between the two depends on the specific needs of your project, with Remodal being more appropriate for modal functionality and jquery.nicescroll for custom scrolling experiences.
Lightweight, cross-browser and highly customizable animated scrolling with jQuery
Pros of jquery.scrollTo
- Lightweight and focused on a single functionality (scrolling to specific elements)
- Extensive browser compatibility, including older versions
- Highly customizable with various options for easing and duration
Cons of jquery.scrollTo
- Limited to scrolling functionality only, lacks advanced features
- Requires jQuery as a dependency
- Less active development and updates compared to jquery.nicescroll
Code Comparison
jquery.scrollTo:
$.scrollTo('#target', 800, {easing:'easeOutQuad'});
jquery.nicescroll:
$("html").niceScroll({
cursorcolor: "#000",
cursorwidth: "10px",
smoothscroll: true
});
Key Differences
- jquery.scrollTo focuses solely on programmatic scrolling to elements
- jquery.nicescroll provides a complete custom scrollbar solution with various styling options
- jquery.nicescroll offers more advanced features like touch support and custom cursors
- jquery.scrollTo is more lightweight and easier to implement for simple scrolling needs
- jquery.nicescroll provides a more visually customizable scrolling experience
Both libraries serve different purposes within the scrolling ecosystem. jquery.scrollTo is ideal for simple, programmatic scrolling, while jquery.nicescroll offers a more comprehensive scrollbar replacement solution with advanced features and customization options.
the last carousel you'll ever need
Pros of Slick
- More focused on carousel/slider functionality, offering a wide range of options for creating responsive and customizable sliders
- Actively maintained with frequent updates and a large community of contributors
- Extensive documentation and examples available, making it easier to implement and customize
Cons of Slick
- Larger file size compared to NiceScroll, which may impact page load times
- Limited to slider/carousel functionality, while NiceScroll offers more general scrolling customization
- May require additional setup for complex layouts or non-standard use cases
Code Comparison
NiceScroll:
$("html").niceScroll({
cursorcolor: "#F00",
cursorwidth: 10,
scrollspeed: 60
});
Slick:
$('.slider').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 3
});
Both libraries use jQuery and offer customization options, but their focus differs. NiceScroll primarily enhances scrollbars, while Slick creates responsive carousels and sliders. The code examples demonstrate the different use cases and initialization methods for each library.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
jQuery.NiceScroll
v. 3.7.6
The best nicescroll release ever - extremely smooth and consistent in modern browsers and mobile devices, with low resource usage
- Web Site: nicescroll.areaaperta.com
- Repo: github.com/inuyaksa/jquery.nicescroll
- Twitter: @nicescroll
Nicescroll as a Greasemonkey plugin: http://userscripts.org/scripts/show/119910 (freezed)
Nicescroll is a jQuery plugin, for nice scrollbars with a very similar ios/mobile style.
- HORIZONAL scrollbar support!
- It supports DIVs, IFrames, textarea, and document page (body) scrollbars.
- Compatible with all recent desktop browsers and older: Chrome, Firefox, Edge, IE8+, Safari (win/mac), Opera. (all A-grade browsers)
- Compatible with mobile devices: iPad/iPhone/iPod, Android 4+, Blackberry phones and Playbook (WebWorks/Table OS), Windows Phone 8 and 10.
- Compatible with all touch devices: iPad, Android tablets, Window Surface.
- Compabible with multi-input devices (mouse with touch or pen): Window Surface, Chrome Desktop on touch notebook.
- Compatible with 2-directional mice: Apple Magic Mouse, Apple Mouser with 2-dir wheel, PC mouse with 2-dir wheel (if browser support it).
What you get: customizable and scrollable divs with momentum for iPad and consistent scrollable areas for all desktop and mobile platforms.
Sexy zoom feature: you can "zoom in" on the content of any nicescroll enabled DIV. Nice to use and nice to see: all the content of the DIV in fullscreen mode. It works on desktop (double click on div) either in mobile/touch devices using the pinch gesture.
On modern browsers hardware accelerated scrolling has been implemented. Using animationFrame for smoother and cpu-saving scroll animations. (when browser supports)
"Use strict" tested script for maximum code quality. Bower and AMD ready.
Warning for IE6/IE7 users: support for your browser has been deprecated. (Why do you still use this? Please upgrade to a more stable and modern browser)
FEATURES
- Simple installation and activation: functions with NO modification of your code. (some exceptions can happen, in which case you can write to me.)
- Very stylish scrollbars with no occupation on your window: original browser scrollbars need some of page space and reduces window/div usable width.
- You can style main document scrollbar (body) too! (not all devices/browsers support this feature yet)
- You can scroll by dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys) on all browsers.
- Scrolling is smooth (like modern tablet browsing). Speed is customizable.
- Zoom feature.
- Hardware accelerated scroll (where available).
- Animation frame support for smooth scrolling and cpu-saving.
- Dragging scroll mode with scrolling momentum (like touch devices).
- Tested for all major mobile and desktop browser versions.
- Support for touch devices.
- Support for multi-input devices (MSPointer/Pointer support).
- Compatible with many other browsers and webkit derivatives!
- Scrollbar has a lot a customizable features.
- Native scroll events are working.
- Fully integrated with jQuery.
- Compatibile with jQuery UI, jQuery Touch, jQuery Mobile
DEPENDENCIES
jQuery is required to be included in your scripts. Works with jQuery 1.x / 2.x / 3.x branch (slim version don't works)
- INSTALLATION Put loading script tag after jquery script tag and loading the zoom image in the same folder of the script:
When using the zoom feature, copy "zoomico.png" in to the same folder as jquery.nicescroll.js.
- HOW TO USE
ALWAYS Initialize nicescroll in a (document) ready statement.
// 1. Simple mode, it styles document scrollbar:
$(function() {
$("body").niceScroll();
});
// 2. Instance with object returned:
var nice = false;
$(function() {
nice = $("body").niceScroll();
});
// 3. Style a DIV and change cursor color:
$(function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
});
// 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:
$(function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
});
// 5. Get nicescroll object:
var nice = $("#mydiv").getNiceScroll();
// 6. Hide scrollbars:
$("#mydiv").getNiceScroll().hide();
// 7. Check for scrollbars resize (when content or position have changed):
$("#mydiv").getNiceScroll().resize();
// 8. Scrolling to a position:
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis
CONFIGURATION PARAMETERS
When you call "niceScroll" you can pass some parameters to custom visual aspects:
$("#thisdiv").niceScroll({
cursorcolor: "#424242", // change cursor color in hex
cursoropacitymin: 0, // change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0
cursoropacitymax: 1, // change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0
cursorwidth: "5px", // cursor width in pixel (you can also write "5px")
cursorborder: "1px solid #fff", // css definition for cursor border
cursorborderradius: "5px", // border radius in pixel for cursor
zindex: "auto" | [number], // change z-index for scrollbar div
scrollspeed: 60, // scrolling speed
mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)
touchbehavior: false, // DEPRECATED!! use "emulatetouch"
emulatetouch: false, // enable cursor-drag scrolling like touch devices in desktop computer
hwacceleration: true, // use hardware accelerated scroll when supported
boxzoom: false, // enable zoom for box content
dblclickzoom: true, // (only when boxzoom=true) zoom activated when double click on box
gesturezoom: true, // (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box
grabcursorenabled: true // (only when touchbehavior=true) display "grab" icon
autohidemode: true, // how hide the scrollbar works, possible values:
true | // hide when no scrolling
"cursor" | // only cursor hidden
false | // do not hide,
"leave" | // hide only if pointer leaves content
"hidden" | // hide always
"scroll", // show only on scroll
background: "", // change css for rail background
iframeautoresize: true, // autoresize iframe on load event
cursorminheight: 32, // set the minimum cursor height (pixel)
preservenativescrolling: true, // you can scroll native scrollable areas with mouse, bubbling mouse wheel event
railoffset: false, // you can add offset top/left for rail position
bouncescroll: false, // (only hw accell) enable scroll bouncing at the end of content as mobile-like
spacebarenabled: true, // enable page down scrolling when space bar has pressed
railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // set padding for rail bar
disableoutline: true, // for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll
horizrailenabled: true, // nicescroll can manage horizontal scroll
railalign: right, // alignment of vertical rail
railvalign: bottom, // alignment of horizontal rail
enabletranslate3d: true, // nicescroll can use css translate to scroll content
enablemousewheel: true, // nicescroll can manage mouse wheel events
enablekeyboard: true, // nicescroll can manage keyboard events
smoothscroll: true, // scroll with ease movement
sensitiverail: true, // click on rail make a scroll
enablemouselockapi: true, // can use mouse caption lock API (same issue on object dragging)
cursorfixedheight: false, // set fixed height for cursor in pixel
hidecursordelay: 400, // set the delay in microseconds to fading out scrollbars
directionlockdeadzone: 6, // dead zone in pixels for direction lock activation
nativeparentscrolling: true, // detect bottom of content and let parent to scroll, as native scroll does
enablescrollonselection: true, // enable auto-scrolling of content when selection text
cursordragspeed: 0.3, // speed of selection when dragged with cursor
rtlmode: "auto", // horizontal div scrolling starts at left side
cursordragontouch: false, // drag cursor in touch / touchbehavior mode also
oneaxismousemode: "auto", // it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse
scriptpath: "" // define custom path for boxmode icons ("" => same script path)
preventmultitouchscrolling: true // prevent scrolling on multitouch events
disablemutationobserver: false // force MutationObserver disabled,
enableobserver: true // enable DOM changing observer, it tries to resize/hide/show when parent or content div had changed
scrollbarid: false // set a custom ID for nicescroll bars
});
Related projects
-
LICENSE
Copyright 2011-17 InuYaksa
Licensed under the MIT License, http://www.opensource.org/licenses/mit-license.php
Images used for zoom icons have derived from OLPC interface, http://laptop.org/8.2.0/manual/Browse_ChangingView.html
Top Related Projects
A jQuery plugin that offers a simplistic way of implementing Lion OS scrollbars.
A lightweight script to animate scrolling to anchor links.
No longer actively maintained.
Lightweight, cross-browser and highly customizable animated scrolling with jQuery
the last carousel you'll ever need
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot