jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light <7ko min.js and <1Ko min.css.

Overview

Nice-Scrollbar

Responsive jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light <7ko min.js and <1Ko min.css.

Infos

  • Get bigger when the mouse is next to it.
  • Scrolling working on Smartphone with the finder on the div you need to scroll.
  • Automatic adaptive scrolling even if content will appear later.
  • You can use a mouse on PC to move the scrollbar.
  • You can click inside the scrollbar to move quickly top or down.
  • You can use the scrolling button of the mouse to scroll content.
  • You can click in the bar to quickly page up or down.
  • You can use scrolling content inside scrolling content.
  • Pixel perfect.
  • Support browser zooming.
  • Add "force scrolling" by scrolling more on extrem position (top or bottom) when 1 scroll element is child of another one. (option) (enable by default)

Dependencies

Smart display

When the user is far away, the scrollbar is hidden. When the user approach, the scrollbar appear.

Image to show animation of the Nice-Scrollbar when the mouse is getting close.

Live Demo

You can test it on my website. www.ti-r.com (NiceScroll)

Demo Files

There is 5 demos inside demos directory

  • demo-basic.html:

    • It show how to use it with a very basic sample.
  • demo-dynamic-add-content:

    • Same as basic but you can add content to the scroll div.
    • The scrollbar is automatically changing size.
  • demo-dynamic-inside-another:

    • Enable to see scrolled content inside another scrolled control.
  • demo-set-options:

    • Show how to set options.
  • demo-add-remove:

    • Show how to add remove scrolling.

How to use it

  • Html: You need 2 div, the parent will own the scrollbar, the child will be scrolled.
<div id="divNiceScrollSampleParent">
	<div id="divNiceScrollSampleInside"></div>
</div>
  • CSS: "padding-right" enable to get some space when the scrollbar grow. "padding" enable to get some space for the text scrolled.
#divNiceScrollSampleParent {
	padding-right:10px;
	height:152px;
	width:580px;
}

#divNiceScrollSampleInside {
	padding:5px;
}
  • Javascript:
var niceScroll = new TR.NiceScroll("#divNiceScrollSampleInside");
niceScroll.Add();
	// After you use it, you can remove remove it
niceScroll.Remove();

Reason

I needed a scrolling library for my personal website, and because I couldn't find a good one fitting all my needs, I just create my own :)

License

The MIT License (MIT), check "LICENSE" file.

Changelog

  • Version 1.3.8

    • Use jQuery instead of $ for some website compatibility.
  • Version 1.3.7

    • Fix error if the script if included before the body of the document declared.
  • Version 1.3.6

    • Default value ajusted to 10 px radius for sensibility touch parameter.
  • Version 1.3.5

    • Fix bug with touch devices.
      • Emitting a clicking event on the "touch end" event if the div is not scrolling.
    • Added option to parameter the Sensibility Touch in px to consider a click.
  • Version 1.3.4

    • Fix bug to restore the scrolltop position of the parent previously existing.
      • Allow to restore the scroll positon of the user on the "Go Back" browser button on my website.
  • Version 1.3.3

    • Remove underscore dependency.
    • Fix bug where clicking on the scrollbar was not responding.
    • Add animation for clicking on background of the toolbar.
  • Version 1.3.2

    • Remove CHANGELOG.md
    • Change debug function.
    • Add debug option inside options.
    • Named listener event on mousemove.
    • Add variable inside object.
    • Rename vars.
  • Version 1.3.1

    • Bug fix on options.
    • Update scrollbar on parent resize.
  • Version 1.3.0

    • Add/Remove events binding with namespace.
    • Add a grandparent node automatically.
    • Enable to force scrolling by scrolling more on extreme position (top or bottom) when 1 scroll element is child of another one. (enable by default)
    • Add options:
      • Set the size of the minimum inner size height
      • Activate force scrolling
      • Set force scrolling attempt before to continue to scroll over the screen
  • Version 1.2.0

    • Fix a bug where too much content to scroll make the cursor too small.
    • Fix a bug on placement for some cases.
    • Add namespace for global vars.
  • Version 1.1.0

    • Insert scrollbar before parent of the div because of a Firefox Bug
      • Firefox: bug scrollbar absolute position is moving on scrolling content
  • Version 1.0.0

    • Release
You might also like...

Slim Webauthn library with ES6, Node and Deno support.

webauthn NPM: @hexagon\webauthn | Deno.land: webauthn Slim Webauthn library with ES6, Node and Deno support. Heavily based on fido2-lib, but with it's

Aug 3, 2022

Integrate Railway Project events with Telegram Chat/Channel using Railway Webhooks

Railway to Telegram Integrate Railway Project events with Telegram Chat/Channel using Railway Webhooks! One Click Self Deploy Manual Self Deploy Fork

Jul 5, 2022

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Sortable Sortable is a JavaScript library for reorderable drag-and-drop lists. Demo: http://sortablejs.github.io/Sortable/ Features Supports touch dev

Jan 5, 2023

Web-pack based Todo-List Website built using HTML, CSS and JavaScript. Tested Using Jest.

To-DO List Live Link Additional description about the project and its features: Built With HTML and CSS Javascript HTML & CSS3 & JavaScript Linters Gi

Mar 31, 2022

🎯 Wallet Lite is a Quick and Simple way to use your Tokens of Lunes Blockchain in a light Chrome extension

Lunes Wallet Lite Offered by: Lunes Installing Web store: Lunes Lite will be available on Chrome Web Store Build: Requisites NodeJS (16 or higher) Git

Oct 25, 2022

Chrome Extensions are something which we use very frequently in our day-to-day life for example Grammarly

Chrome-Extension Chrome Extensions are something which we use very frequently in our day-to-day life for example Grammarly, In this project similarly,

Dec 14, 2022

This package generates a unique ID/String for different browsers. Like chrome, Firefox and any other browsers which supports canvas and audio Fingerprinting.

This package generates a unique ID/String for different browsers. Like chrome, Firefox and any other browsers which supports canvas and audio Fingerprinting.

Broprint.js The world's easiest, smallest and powerful visitor identifier for browsers. This package generates a unique ID/String for different browse

Dec 25, 2022

Extensão de temas para o site Gatry.com, compatível com Firefox, Chrome e Edge.

Extensão de temas  para o site Gatry.com, compatível com Firefox, Chrome e Edge.

Gatry Shades Extensão que dá a possibilidade de aplicar temas ao site gatry.com, bem como demais funcionalidade para reduzir a luminosidade de imagens

Dec 3, 2022
Owner
Renan LAVAREC
Renan LAVAREC
Slim progress bars for anywhere you want to use

qier-progress is a progress bar. It can be used for some watting time like jump links, request data, and load or upload files and images to give us feedback and reduce our anxiety. Also if you have used nprogress, then you must know what I am talking about ~

chen xin 370 Nov 5, 2022
:iphone: A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites

Responsive Boilerplate A powerful, accessible, developer friendly, framework for building responsive websites Responsive Boilerplate is the developers

ResponsiveBP 845 Dec 22, 2022
frida snippet generator firefox extension for developer.android.com

Frida Snippet Generator for developer.android.com Right click on function names (public methods section) or fields and it will automatically copy gene

Ahmet Bilal Can 22 Sep 4, 2022
Pressure is a JavaScript library for handling both Force Touch and 3D Touch on the web

Pressure is a JavaScript library for handling both Force Touch and 3D Touch on the web, bundled under one library with a simple API that makes working with them painless.

Stuart Yamartino 2.9k Dec 29, 2022
Super tiny size multi-touch gestures library for the web.    You can touch this →

Preview You can touch this → http://alloyteam.github.io/AlloyFinger/ Install You can install it via npm: npm install alloyfinger Usage var af = new Al

腾讯 AlloyTeam 3.3k Dec 12, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
It's a tiny freeware library on TypeScript to sinhronize page scrolling and navigation meny-bar.

Scroll progress (dual-side-scroll) v1.2.3 Assignment This tiny plugin is designed to show the progress of the page scrolling interactively. There are

Evgeny 4 May 17, 2022
🚀 A web extension starter built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Brave, and Opera..

Web Extension Starter A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome

BCIT Design & Development Club (BCIT-DDC) 28 Dec 28, 2022