Convert Figma logo to code with AI

jamesflorentino logonanoScrollerJS

A jQuery plugin that offers a simplistic way of implementing Lion OS scrollbars.

2,693
504
2,693
71
View on GitHubView on NPM

Top Related Projects

noelboss's avatar

featherlight

2,076

Featherlight is a very lightweight jQuery lightbox plugin. It's simple yet flexible and easy to use. Featherlight has minimal css and uses no inline styles, everything is name-spaced, it's completely customizable via config object and offers image, ajax and iframe support out of the box. Featherlights small footprint weights about 4kB – in total.

cferdinandi's avatar

smooth-scroll

5,491

A lightweight script to animate scrolling to anchor links.

Grsmto's avatar

simplebar

5,989

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

malihu's avatar

malihu-custom-scrollbar-plugin

4,109

Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.

inuyaksa's avatar

jquery.nicescroll

3,603

nicescroll plugin for jquery - scrollbars like iphone/ipad

Quick Overview

nanoScrollerJS is a lightweight jQuery plugin that creates custom scrollbars on web pages. It aims to replicate the native scrolling experience of iOS devices on desktop browsers, providing a sleek and customizable alternative to default browser scrollbars.

Pros

  • Lightweight and fast performance
  • Highly customizable appearance
  • Smooth scrolling experience
  • Compatible with most modern browsers

Cons

  • Requires jQuery as a dependency
  • May not be necessary for all projects, especially with improved native scrollbar styling options in modern browsers
  • Limited maintenance and updates in recent years

Code Examples

Creating a basic nanoScroller:

$(".nano").nanoScroller();

Customizing the scrollbar appearance:

$(".nano").nanoScroller({
    alwaysVisible: true,
    railColor: '#888',
    barColor: '#444'
});

Programmatically scrolling to a specific element:

$(".nano").nanoScroller({ scrollTo: $('#someElement') });

Getting Started

  1. Include jQuery and nanoScroller in your HTML:
<link rel="stylesheet" href="nanoscroller.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.nanoscroller.min.js"></script>
  1. Create a container with the "nano" class and a content div with the "nano-content" class:
<div class="nano">
    <div class="nano-content">
        <!-- Your content here -->
    </div>
</div>
  1. Initialize nanoScroller in your JavaScript:
$(document).ready(function() {
    $(".nano").nanoScroller();
});

Competitor Comparisons

noelboss logo

featherlight

2,076

Featherlight is a very lightweight jQuery lightbox plugin. It's simple yet flexible and easy to use. Featherlight has minimal css and uses no inline styles, everything is name-spaced, it's completely customizable via config object and offers image, ajax and iframe support out of the box. Featherlights small footprint weights about 4kB – in total.

Pros of Featherlight

  • Lightweight and simple to use, with minimal setup required
  • Supports various content types (images, ajax, iframes) out of the box
  • Highly customizable with extensive configuration options

Cons of Featherlight

  • Limited to lightbox functionality, not as versatile as NanoScrollerJS
  • May require additional plugins for advanced features
  • Less active development and community support

Code Comparison

NanoScrollerJS:

$(".nano").nanoScroller({
    alwaysVisible: true,
    preventPageScrolling: true
});

Featherlight:

$.featherlight('#myContent', {
    closeOnClick: 'anywhere',
    afterOpen: function() { /* do something */ }
});

Summary

Featherlight is a lightweight and easy-to-use lightbox plugin, while NanoScrollerJS is a more versatile scrollbar solution. Featherlight excels in simplicity and out-of-the-box support for various content types, but it's limited to lightbox functionality. NanoScrollerJS offers more advanced scrolling features and has a more active community. The choice between the two depends on the specific needs of your project, whether you require a simple lightbox solution or a more comprehensive scrolling plugin.

cferdinandi logo

smooth-scroll

5,491

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, including IE9+
  • Offers customizable easing functions for different scrolling effects

Cons of smooth-scroll

  • Limited to smooth scrolling functionality only, unlike nanoScrollerJS which offers more features
  • Doesn't provide custom scrollbar styling options
  • May require additional plugins or code for advanced scrolling behaviors

Code Comparison

smooth-scroll:

var scroll = new SmoothScroll('a[href*="#"]', {
    speed: 500,
    easing: 'easeInOutCubic'
});

nanoScrollerJS:

$(".nano").nanoScroller({
    alwaysVisible: true,
    preventPageScrolling: true
});

The code snippets demonstrate the basic setup for each library. smooth-scroll focuses on creating smooth anchor link scrolling, while nanoScrollerJS is more oriented towards creating custom scrollbars with various options.

Both libraries serve different purposes: smooth-scroll is ideal for projects requiring simple, smooth page navigation, while nanoScrollerJS is better suited for applications needing custom scrollbar styling and advanced scrolling functionality.

Grsmto logo

simplebar

5,989

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

Pros of SimpleBar

  • More actively maintained with recent updates
  • Supports more modern browsers and frameworks (React, Vue, Angular)
  • Smaller file size and better performance

Cons of SimpleBar

  • Less customization options compared to nanoScroller
  • May require more setup for complex use cases
  • Not as widely adopted in legacy projects

Code Comparison

nanoScroller:

$(".nano").nanoScroller({
    alwaysVisible: true,
    preventPageScrolling: true
});

SimpleBar:

import SimpleBar from 'simplebar';

new SimpleBar(document.getElementById('myElement'), {
    autoHide: false
});

Summary

SimpleBar offers a more modern approach to custom scrollbars with better performance and broader framework support. It's lighter and more actively maintained compared to nanoScroller. However, nanoScroller may still be preferred in some legacy projects or where extensive customization is required. SimpleBar's setup is slightly more involved but offers a cleaner API. Both libraries achieve similar results, but SimpleBar is generally the better choice for new projects due to its ongoing development and improved performance.

malihu logo

malihu-custom-scrollbar-plugin

4,109

Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.

Pros of malihu-custom-scrollbar-plugin

  • More customization options, including themes and advanced styling
  • Better cross-browser compatibility, especially for older versions
  • Supports both vertical and horizontal scrollbars

Cons of malihu-custom-scrollbar-plugin

  • Larger file size, which may impact page load times
  • More complex setup and configuration process
  • Potentially slower performance due to additional features

Code Comparison

malihu-custom-scrollbar-plugin:

$(".content").mCustomScrollbar({
    theme: "dark",
    scrollButtons: { enable: true },
    autoHideScrollbar: true
});

nanoScrollerJS:

$(".content").nanoScroller({
    alwaysVisible: true,
    preventPageScrolling: true
});

The malihu-custom-scrollbar-plugin offers more options in its initialization, allowing for greater customization. However, nanoScrollerJS provides a simpler setup with fewer configuration options.

Both plugins aim to enhance scrollbar functionality and appearance, but malihu-custom-scrollbar-plugin focuses on extensive customization and cross-browser support, while nanoScrollerJS prioritizes simplicity and performance. The choice between the two depends on specific project requirements, such as the need for advanced styling options versus lightweight implementation.

inuyaksa logo

jquery.nicescroll

3,603

nicescroll plugin for jquery - scrollbars like iphone/ipad

Pros of jquery.nicescroll

  • More feature-rich, offering additional customization options
  • Supports both vertical and horizontal scrolling
  • Larger community and more frequent updates

Cons of jquery.nicescroll

  • Heavier file size, which may impact page load times
  • More complex configuration due to numerous options
  • Potential performance issues on older devices or with large DOM structures

Code Comparison

nanoScrollerJS:

$(".nano").nanoScroller({
    alwaysVisible: true,
    preventPageScrolling: true
});

jquery.nicescroll:

$("html").niceScroll({
    cursorcolor: "#000",
    cursorwidth: "10px",
    cursorborder: "1px solid #fff",
    smoothscroll: true
});

Both libraries offer simple initialization, but jquery.nicescroll provides more customization options out of the box. nanoScrollerJS focuses on simplicity and performance, while jquery.nicescroll offers a wider range of features at the cost of increased complexity and file size.

When choosing between the two, consider your project's specific requirements. If you need a lightweight solution with good performance, nanoScrollerJS might be the better choice. However, if you require extensive customization options and don't mind the additional overhead, jquery.nicescroll could be more suitable.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

This project is not maintained

This project is not currently actively maintained. If you need an up-to-date scrollbar plugin, try OverlayScrollbars instead: https://github.com/KingSora/OverlayScrollbars

nanoScroller.js NPM version

nanoScroller.js is a jQuery plugin that offers a simple way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .nano-content. The other scrollbar div elements .pane > .nano-slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets.

Downloads

To start using, you need three basic things:

1. Markup

The following type of markup structure is needed to make the plugin work:

<div id="about" class="nano">
    <div class="nano-content"> ... content here ...  </div>
</div>

Copy the HTML markup. Change .nano into something related to your content. Though you can also remove that attribute as long as you have a parent div with an ID reference. e.g. #parent > .nano. nano and nano-content classnames can be customized via plugin options (in that case you must rename them inside the plugin's CSS file as well).

2. CSS

Link to the nanoscroller.css file inside your page's <head> section (...or copy the contents from it to your page's main stylesheet file).

<link rel="stylesheet" href="nanoscroller.css">

You should specify a width and a height to your container, and apply some custom styling for your scrollbar. Here's an example:

.nano { background: #bba; width: 500px; height: 500px; }
.nano > .nano-content { padding: 10px; }
.nano > .nano-pane   { background: #888; }
.nano > .nano-pane > .nano-slider { background: #111; }

3. JavaScript

Running this script will apply the nanoScroller plugin to all DOM elements with a .nano className.

$(".nano").nanoScroller();

Advanced methods

scroll

To scroll at the top:

$(".nano").nanoScroller({ scroll: 'top' });

To scroll at the bottom:

$(".nano").nanoScroller({ scroll: 'bottom' });

To scroll at the top with an offset value:

$(".nano").nanoScroller({ scrollTop: value });

To scroll at the bottom with an offset value:

$(".nano").nanoScroller({ scrollBottom: value });

To scroll to an element:

$(".nano").nanoScroller({ scrollTo: $('#a_node') });

stop:

To stop the operation. This option will tell the plugin to disable all event bindings and hide the gadget scrollbar from the UI.

$(".nano").nanoScroller({ stop: true });

destroy:

Destroys nanoScroller and restores browser's native scrollbar.

$(".nano").nanoScroller({ destroy: true });

flash:

To flash the scrollbar gadget for an amount of time defined in plugin settings (defaults to 1,5s). Useful if you want to show the user (e.g. on pageload) that there is more content waiting for him.

$(".nano").nanoScroller({ flash: true });

nanoScroller();

Refresh the scrollbar. This simply re-calculates the position and height of the scrollbar gadget.

$(".nano").nanoScroller();

Custom events

'scrollend'

A custom 'scrollend' event is triggered on the element every time the user has scrolled to the end of the content element (does not get triggered more than once when user tries to scroll down and has already reached the end of scrollable content).

$(".nano").bind("scrollend", function(e){
    console.log("current HTMLDivElement", e.currentTarget);
});

Some browsers trigger this event more than once each time, so to listen to the custom event, instead of using jQuery's normal .bind or .on, you most likely want to use this tiny jQuery debounce plugin to prevent browsers from firing your function more than once every 100ms.

$(".nano").debounce("scrollend", function() {
    alert("The end");
}, 100);

'scrolltop'

Same as the 'scrollend' event, but it is triggered every time the user has scrolled to the top of the content element.

'update'

Same as the 'scrolltop' and 'scrollend' events, but it's triggered every time the user scrolls. It also carries a JavaScript object with the current position, the maximum height and the direction (up or down).

$(".nano").on("update", function(event, values){
    console.debug( values );
});

Plugin Options

There are a few options that you can change when running nanoScroller, e.g. $(".nano").nanoScroller({ paneClass: 'myclass' });

iOSNativeScrolling

Set to true if you want to use native scrolling in iOS 5+. This will disable your custom nanoScroller scrollbar in iOS 5+ and use the native one instead. While the native iOS scrollbar usually works much better, there could possibly be bugs in certain situations.

Notice that .pane and .slider elements are not generated/added for devices that support iOS native scrolling when iOSNativeScrolling option is enabled.

Default: false

$(".nano").nanoScroller({ iOSNativeScrolling: true });

sliderMinHeight

Sets the minimum height of the slider element.

Default: 20

$(".nano").nanoScroller({ sliderMinHeight: 40 });

sliderMaxHeight

Sets the maximum height of the slider element.

Default: null

$(".nano").nanoScroller({ sliderMaxHeight: 200 });

preventPageScrolling

Set to true to prevent page scrolling when top or bottom inside the content div is reached.

Default: false

$(".nano").nanoScroller({ preventPageScrolling: true });

disableResize

Set to true to disable the resize from nanoscroller. Useful if you want total control of the resize event. If you set this option to true remember to call the reset method so that the scroll don't have strange behavior.

Default: false

$(".nano").nanoScroller({ disableResize: true });

alwaysVisible

Set to true to stop the scrollbar from auto-hiding itself.

Default: false

$(".nano").nanoScroller({ alwaysVisible: true });

flashDelay:

Use this setting to specify the scrollbar hide delay in milliseconds if you have enabled the flash option.

$(".nano").nanoScroller({ flashDelay: 1000 });

Default: 1500

paneClass

A classname for scrollbar track element. If you change this setting, you also have to change it in the plugin's CSS file.

Default: 'nano-pane'

$(".nano").nanoScroller({ paneClass: 'scrollPane' });

sliderClass

A classname for scrollbar thumb element. If you change this setting, you also have to change it in the plugin's CSS file.

Default: 'nano-slider'

$(".nano").nanoScroller({ sliderClass: 'scrollSlider' });

contentClass

A classname for your content div. If you change this setting, you also have to change it in the plugin's CSS file.

Default: 'nano-content'

$(".nano").nanoScroller({ contentClass: 'sliderContent' });

enabledClass

A classname for scrollbar enabled mode. If you change this setting, you also have to change it in the plugin's CSS file.

Default: 'has-scrollbar'

$(".nano").nanoScroller({ enabledClass: '__enabled' });

flashedClass

A classname for scrollbar flashed mode. If you change this setting, you also have to change it in the plugin's CSS file.

Default: 'flashed'

$(".nano").nanoScroller({ flashedClass: '__flashed' });

activeClass

A classname for scrollbar active mode. If you change this setting, you also have to change it in the plugin's CSS file.

Default: 'active'

$(".nano").nanoScroller({ activeClass: '__active' });

tabIndex

Set the tab order of the scrollable content. Set to -1 to skip over the scrollable content when tabbing.

Default: 0

$(".nano").nanoScroller({ tabIndex: 0 });

How it works

Fig 1.

The plugin works by creating a scrollbar gadget (with pre-defined css for styling) and then subscribing the .nano-content's scroll events to it. Mouse press and drag events are also subscribed to the .nano-pane and .nano-pane > .nano-slider to emulate the native scrollbar's mechanism. The system scrollbars are hidden from the viewport (Fig 1). By doing this, we still retain the natural scrolling experience provided by the OS.

We are still working on doing a horizontal scrolling feature. If you're interested in contributing to the project, you are free to fork it and create a pull request.

Development

To build nanoScroller from source you need the following libraries installed:

How to build & contribute

  1. Make sure that you have Grunt installed.
  2. In terminal move to nanoscroller folder and run npm install to install all dependencies.
  3. Make all Javascript changes in Coffeescript file(s), CSS changes in CSS file(s).
  4. run grunt to build nanoScroller
  5. Make sure that all changes are valid and open a pull request.

How to run tests

  1. You need to have PhantomJS installed. On Mac OS X the easiest way is to install Homebrew and run brew install phantomjs.
  2. run grunt test in terminal

Browser compatibility

Tested desktop browsers:

  • IE7+
  • Firefox 3+
  • Chrome
  • Safari 4+
  • Opera 11.60+

Mobile support:

  • iOS 5+ (iPhone, iPad and iPod Touch)
  • iOS 4 (with a polyfill)
  • Android Firefox
  • Android 2.2/2.3 native browser (with a polyfill)
  • Android Opera 11.6 (with a polyfill)
  • If you see it's broken on other tablets and mobile devices, please file a ticket in the git repo. Along with model name, and OS of the device.

If you find a bug, please report here at the issues section.

Using a polyfill for better mobile browser support

You can use overthrow.js polyfill (~1.5kb minified and gzipped) to make nanoScroller work on many mobile devices. It emulates CSS overflow (overflow: auto;/overflow: scroll;) in devices that are lacking it.

To use overthrow, link to the javascript file in your HTML document...

<script src="overthrow.js"></script>

...and add an overthrow class to your content div.

<div id="about" class="nano">
    <div class="overthrow nano-content"> ... content here ...  </div>
</div>

Contributors

Other people who have contributed code:

Credits

NPM DownloadsLast 30 Days