Customizable, Pluginable, and High-Performance JavaScript-Based Scrollbar Solution.

Overview

Smooth Scrollbar

npm monthly downloads core size gzip size Build status Gitpod Ready-to-Code

Customizable, Flexible, and High Performance Scrollbars!

Installation

⚠️ DO NOT use custom scrollbars unless you know what you are doing. Read more

Tell us about the features you want in the next major update.

Via NPM (recommended):

npm install smooth-scrollbar --save

Via Bower:

bower install smooth-scrollbar --save

Browser Compatibility

Browser Version
IE 10+
Chrome 22+
Firefox 16+
Safari 8+
Android Browser 4+
Chrome for Android 32+
iOS Safari 7+

Demo

https://idiotwu.github.io/smooth-scrollbar/

Usage

Since this package has a pkg.module field, it's highly recommended to import it as an ES6 module with some bundlers like webpack or rollup:

import Scrollbar from 'smooth-scrollbar';

Scrollbar.init(document.querySelector('#my-scrollbar'));

If you are not using any bundlers, you can just load the UMD bundle:

<script src="dist/smooth-scrollbar.js"></script>

<script>
  var Scrollbar = window.Scrollbar;

  Scrollbar.init(document.querySelector('#my-scrollbar'));
</script>

Documentation

latest 7.x

FAQ

  • How to deal with position: fixed elements? #362
  • How to temporarily stop scrolling? #361
  • How to enable hash/anchor scrolling? #360
  • How to direct all scrolling to a particular direction? #359
  • How to disable scrolling in a particular direction? #357
  • more...

Who's Using It

  • Awwwards Conference: An Event for UX / UI Designers and Web Developers.
  • Listeners Playlist: A cool music player designed by Jiyong Ahn sharing musics from the facebook group 'Listeners Playlist'.
  • Matter: A new and better way to grow your professional skills.
  • Parsons Branding: Brand strategy and design studio based in Cape Town.
  • Feel free to add yours here 🤗 .

License

MIT

Comments
  • Make keyboard scrolling optional?

    Make keyboard scrolling optional?

    I have a scrollable content area with content in it. I listen to the key up/down event to jump to the next/prev. items. The problem is that smooth-scrollbar catch this events in (https://github.com/idiotWu/smooth-scrollbar/blob/master/src/events/keyboard.js) and handle it itself w/o propagation.

    This event's are nice but I need an exception for the up/down keys.

    Have you an idea how to solve that? Maybe some modification in this lib?

    enhancement 
    opened by aight8 19
  • URL with hash links  web.com#someID doesn't load in the right position

    URL with hash links web.com#someID doesn't load in the right position

    Environment

    • Browser: Chrome Version 62.0.3202.94 (Official Build) (64-bit)
    • Version of smooth-scrollbar: ^7.3.1 and higher (have same issue with the last version in another project)

    Issue Summary

    Accesing the webpage with a #link doesn't scroll to the section with that ID

    Expected Behavior

    If you go to the webpage.com/#someID the page would load and be positioned in the page section where that someID had been set.

    wontfix FAQ 
    opened by HectorLS 18
  • URL with hash links. With Firefox, it doesn't work properly.

    URL with hash links. With Firefox, it doesn't work properly.

    Try the same thing with Firefox, it doesn't work properly.

    Originally posted by @mrWilson123 in https://github.com/idiotWu/smooth-scrollbar/discussions/360#discussioncomment-2066010

    opened by mrWilson123 17
  • setPosition not working

    setPosition not working

    hey there! i got your plugin working an its beautiful. i just have a problem when trying to scroll to a section on the page. when i click my button it just says scrollbar is not defined. Can you tell me what am I doing wrong?

    Thank you so much! Jaro

    bildschirmfoto 2017-09-06 um 15 14 40
    opened by milkdesign 15
  • Transform not working on Chrome 61.03.3163.100

    Transform not working on Chrome 61.03.3163.100

    Environment

    • Browser: Chrome 61.0.3163.100 (Official Build) (64-bit)
    • Version of smooth-scrollbar: 8.1.4
    • MacOS Sierra 10.12.6

    Hello, Awesome library by the way! 🥇

    this is my code, i just started to use it.

    it works perfectly on Safari 11.0 , Opera 48.0, Firefox 54.0.11

    But is not working on Chrome, it's initialized properly, the CSS is active, but cannot scroll, so the transform never occurs, not sure what i missed

    And if i add the overflow: auto !important ( must be important because the library would overwrite it otherway) then the scroll start to do a weird jumps down and up 😢 Some help here would be much appreciated.

    JS code

    import Scrollbar from 'smooth-scrollbar';
    
    var element =  document.querySelector('#scrollbar-wrapper');
    var options = {
      damping: 0.25,
      thumbMinSize: 5,
      renderByPixel: true,
      alwaysShowTracks: false,
      continuousScrolling: true
    };
    
    Scrollbar.init(element, options);
    document.querySelector('body').setAttribute('scroller', true);
    

    Sass Code

    [scroller='true'] {
      #scrollbar-wrapper {
        height: 100vh;
        width: 100vw;
      }
    }
    
    opened by HectorLS 14
  • Parent container doesn't continue to scroll once smooth-scrollbar reaches top/bottom of a container.

    Parent container doesn't continue to scroll once smooth-scrollbar reaches top/bottom of a container.

    I noticed on the demo that the angular-smooth-scrollbar does exhibit this behaviour, but the original one doesn't. Is there a way to enable this in the smooth-scrollbar? Also, if viewed on an older browser, will it gracefully fall back to the native scrollbar?

    enhancement feature 
    opened by jared83 14
  • Significant framerate drop on 6X slowdown in chrome developer tools

    Significant framerate drop on 6X slowdown in chrome developer tools

    Issue Summary

    Simulating slower CPU 4x and 6x drops framerate to pretty much unusable state

    Current Behavior

    Framerate on 6x slowdown goes down to 20 fps even when scroll is in stationary position

    Expected Behavior

    In stationary position framerate should be 60 fps, while in motion some degradation is okay but 10 or 20 fps is not good

    Steps to Reproduce

    Run the current demo from the website with chrome using 4x and 6x CPU slowdown under performance tab

    wontfix performance 
    opened by antonioberetini 13
  • accessibility: tabindex is always 1 now

    accessibility: tabindex is always 1 now

    Environment

    • Version of smooth-scrollbar: 8.2.7

    Issue Summary

    Current tabindex is always 1. https://github.com/idiotWu/smooth-scrollbar/blob/768f80e647140bb5a0ec90e3cbfed4222061814b/src/scrollbar.ts#L150

    It would be great to give user ability to change tabindex number

    accessibility 
    opened by Hongbo-Miao 13
  • Added invertDelta option ✨

    Added invertDelta option ✨

    How about this kind of solution? It can be used temporarily until v8. Also because we have to fork react-smooth-scrollbar only for the dependency and it's really annoying.

    Description

    Added invertDelta option on smooth-scrollbar to invert the scroll delta, is really simple. In the future it could be changed with reducers concept.

    Types of changes

    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [x] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)
    opened by liqueflies 13
  • [7.3.0] scrollTo feels agressive

    [7.3.0] scrollTo feels agressive

    Issue Summary

    The duration of scrollTo I feel worked better in previous versions, it's quite hard to get a smooth transition now as it's very fast until the last like (90%), so if you set it to 1000, it feels more like 200 for example. The dampening is very subtle.

    Expected Behavior

    scrollTo to feel more like it's sticking to the duration.

    Current Behavior

    scrollTo feels much faster than the duration set.

    enhancement priority: moderate 
    opened by TomS- 13
  • Mass and momentum

    Mass and momentum

    Is it possible to control mass and momentum? I feel that with a bit more mass and momentum, the scroll would feel more natural. For instance comparing it to iOS native scroll, on shorter swipes, scroll moves longer and it eases out before it stops.

    enhancement 
    opened by antonioberetini 12
  • Anchor Tags not working with horizontal scrolling

    Anchor Tags not working with horizontal scrolling

    Checks

    • [X] Not a duplicate.

    Version

    ^8.8.1

    Description

    I think I've found a bug when it comes to horizontal scrolling and anchor tags.

    https://jsbin.com/romofifado/1/edit?html,css,js,output

    I've reproduced the bug above.

    #target doesn't jump to 001.

    Steps to Reproduce

    Horizontal scrolling on my website uses

    .wrapper {
      display: flex;
      flex-direction: row;
      max-width: 100vw;
      transform: rotate(90deg) translateY(-100vh);
      transform-origin: top left;
      object-fit: cover;
    }
    
    .outer-wrapper {
      width: 100vh;
      height: 100vw;
      transform: rotate(-90deg) translateX(-100vh);
      transform-origin: top left;
      overflow-y: hidden;
      overflow-x: hidden;
      position: absolute;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    

    Online Demo

    https://jsbin.com/romofifado/1/edit?html,css,js,output

    opened by nzmitch 0
  • [Idea/v9] target-agnostic smooth scrolling engine

    [Idea/v9] target-agnostic smooth scrolling engine

    Motivation

    Currently, this library focuses on interacting with DOM elements. However, since the smoothening/interpolation logic is independent of DOM, we can create an all-purpose smooth scrolling engine that can be used in DOM, canvas, and anywhere you want to smoothen the scrolling.

    Note that the word "scrolling" here is an abstract concept that implies any interaction with mouse wheels or touch screens.

    Proposal

    In our next version, we want to split the core library into the following three packages:

    1. @smooth-scrollbar/engine: this package is the target-agnostic scrolling engine that provides the basic smoothening(interpolation) algorithm and the rendering logic. You can think of it as [email protected] without event handlers. A minimal interface will be:
    class SrollbarEngine {
      // sets or updates the sizes of container and content
      setSize(size) {}
      // sets scrolling delta
      setDelta(x, y) {}
      // increase scrolling delta
      addDelta(x, y) {}
      // scrolls to the specific position with easing
      scrollTo(x, y, duration, options) {}
      // sets scrolling position
      setPosition(x, y) {}
      // scrolling events
      on(event, handler) {}
      // the rendering loop
      protected render() {}
    }
    
    1. @smooth-scrollbar/event-handlers: the common event handlers including wheel, touch, and/maybe keyboard. (I'm not sure if this should be merged into the engine package.)
    2. smooth-scrollbar: the DOM adapter that equals to [email protected]. We keep using this name for compatibility.
    idea accepted 
    opened by idiotWu 2
  • Laggy scrolling on Safari@iOS 16

    Laggy scrolling on Safari@iOS 16

    Discussed in https://github.com/idiotWu/smooth-scrollbar/discussions/498

    Originally posted by RubenReuring September 22, 2022 Safari smooth scroll is way 'slower' compared to Chrome. I have this issue on desktop aswell as mobile. On mobile the slowness is so bad I almost want to disable the smooth scrollbar. Is there anything I could do to improve this scrolling on Safari?

    help wanted investigating alien bug mobile 
    opened by idiotWu 0
  • Horizontal Scroll even after Disable X-Axis Scrolling

    Horizontal Scroll even after Disable X-Axis Scrolling

    Discussed in https://github.com/idiotWu/smooth-scrollbar/discussions/480

    Originally posted by blitzve0 June 4, 2022

    https://user-images.githubusercontent.com/67477131/171929609-cdce99fa-e567-408e-8621-3e6c7e1b7ee8.mp4

    Hi, I am using a plugin to disable X-axis horizontal scrolling totally, but sometimes accidentally when I hold and drag from the right edge, the site starts horizontally dragging. You can check the video and can try it out also here https://haspr.in/

    This is the Plugin

    import Scrollbar from 'smooth-scrollbar'
    
    class DisableScroll extends Scrollbar.ScrollbarPlugin {
      static pluginName = 'DisableScroll'
    
      transformDelta(delta, fromEvent) {
        delta['x'] = 0
    
        return delta
      }
    }
    
    DisableScroll.pluginName = 'DisableScroll'
    export default DisableScroll
    
    ```</div>
    bug priority: high 
    opened by idiotWu 2
  • polyfills.js depends on 'core-js/es/array/from'. CommonJS or AMD dependencies can cause optimization bailouts.

    polyfills.js depends on 'core-js/es/array/from'. CommonJS or AMD dependencies can cause optimization bailouts.

    with angular 13 , getting following warnings

    Warning: /SPA/ngx-starter-kit/node_modules/smooth-scrollbar/polyfills.js depends on 'core-js/es/array/from'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    
    Warning: /SPA/ngx-starter-kit/node_modules/smooth-scrollbar/polyfills.js depends on 'core-js/es/map'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    
    Warning: /SPA/ngx-starter-kit/node_modules/smooth-scrollbar/polyfills.js depends on 'core-js/es/object/assign'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    
    Warning: /SPA/ngx-starter-kit/node_modules/smooth-scrollbar/polyfills.js depends on 'core-js/es/set'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    
    Warning: /SPA/ngx-starter-kit/node_modules/smooth-scrollbar/polyfills.js depends on 'core-js/es/weak-map'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    
    
    dependencies 
    opened by xmlking 1
  • [Idea/v9] Emit scrolling-related events

    [Idea/v9] Emit scrolling-related events

    Discussed in https://github.com/idiotWu/smooth-scrollbar/discussions/364

    Originally posted by IljaDaderko April 2, 2021 I'm writing some logic that needs to be started on scroll start and ended when scrolling ends / becomes idle.

    I can detect scroll start with scrolbar.addListener listener, but I can't seem to find anything that indicates "stop" event i.e. when scrollbars become idle and user is no longer pressing on the screen / using mouse wheel.

    Is event like this exposed? If not what would be right approach here?

    idea custom plugins accepted 
    opened by idiotWu 0
Releases(v8.8.1)
Owner
Daofeng Wu
I've passed the Turing Test.
Daofeng Wu
🚀 Performance focused, lightweight scroll animation library 🚀

Sal Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. No dependencies! Sal (Scroll Animatio

Mirek Ciastek 3.4k Dec 28, 2022
Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).

Please note: skrollr hasn't been under active development since about September 2014 (check out the contributions graphs on https://github.com/Prinzho

Alexander Prinzhorn 18.6k Jan 3, 2023
Simple and tiny JavaScript library that adds parallax animations on any images

simpleParallax.js simpleParallax.js is a very simple and tiny Vanilla JS library that adds parallax animations on any images. Where it may be laboriou

Geoffrey 1.5k Jan 3, 2023
Lightweight, vanilla javascript parallax library

RELLAX Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library. Update: Rellax now works on mobile (v1.0.0). Demo Website G

Dixon & Moe 6.7k Dec 30, 2022
Scroll-stash - A JavaScript plugin to help preserve an element's scroll position.

scroll-stash A JavaScript plugin to help preserve an element's scroll position. CodePen Example Installation npm install scroll-stash JavaScript Impo

Sebastian Nitu 5 Sep 5, 2022
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

lax.js Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. >> DEMO << What's new w

Alex Fox 9.4k Dec 29, 2022
Cubic-bezier implementation for your JavaScript animation easings – MIT License

BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, ...any other custom curve) exactly like in CSS Transitions.

@greweb 1.6k Dec 27, 2022
🚀 Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies.

Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 21.7Kb.

Hieu Truong 11 Jun 20, 2022
A simple and fast API to monitor elements as you scroll

scrollMonitor The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch

Stu Kabakoff 3.3k Jan 4, 2023
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage.js English | Español | Français | Pусский | 中文 | 한국어 Available for Vue, React and Angular. | 7Kb gziped | Created by @imac2 Demo online | Cod

Álvaro 34.3k Jan 4, 2023
Ngx-scrollbar-indicator - This will show an indicator with scrollbar

ngx-scrollbar-indicator Consider a scenario, where you have 100s of items, sorted alphabetically. Now, when user scrolls through the same, user doesn'

Dharmen Shah 5 Feb 2, 2021
jQuery CSS Customizable Scrollbar

jQuery Scrollbar Cross-browser CSS customizable scrollbar with advanced features: Easy to implement No fixed height or width Responsive design support

Yuriy Khabarov 754 Jan 3, 2023
A high-performance, interactive and customizable video player control, built upon Reanimated v2 & GestureHandler v2

`JSThread` to `JSThread`, `UIThread` to `UIThread`. React Native Reanimated Expo Player 100% written in Typescript video player component, interaction

Alan Toa 58 Jan 4, 2023
A lightweight cross browser javascript scrollbar.

tinyscrollbar ** HELP MAINTAINER NEEDED!! ** Environments in which to use tinyscrollbar Browser support differs between the jQuery plugin and the plai

Maarten Baijs 398 Nov 9, 2022
A lightweight scrollbar library written in vanilla javascript.

A lightweight, dependency-free scrollbar library written in vanilla javascript. Fully customisable via CSS Native scrolling behaviour preserved Vertic

Karl 56 Dec 4, 2022
🏁 High performance subscription-based form state management for React

You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of React Final Form.

Final Form 7.2k Jan 7, 2023
High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazysizes lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), ifra

Alexander Farkas 16.6k Jan 1, 2023
vanilla-js lightweight custom HTML scrollbar

FakeScroll ⚡ lightweight custom-looking scrollbars 1.4KB gzipped (js) 4.0KB minified (js) 7.7KB unminified (js) ~20+ KB avarage similar scripts (unmin

Yair Even Or 353 Nov 23, 2022
A lightweight jQuery custom scrollbar plugin, that triggers event when reached the defined point.

Scrollbox A lightweight jQuery custom scrollbar plugin, that triggers event when reached the defined point. Demo Page Table of contents Browser compat

null 15 Jul 22, 2022
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022