GithubHelp home page GithubHelp logo

atomless / simple-scrollbar Goto Github PK

View Code? Open in Web Editor NEW

This project forked from buzinas/simple-scrollbar

0.0 1.0 0.0 50 KB

Very simple and lightweight vanilla javascript library for creating a custom scrollbar cross-browser

License: MIT License

CSS 17.99% JavaScript 82.01%

simple-scrollbar's Introduction

SimpleScrollbar

Very simple vanilla javascript library for creating a custom scrollbar cross-browser and cross-devices.

Demo

http://buzinas.github.io/simple-scrollbar

Benefits

  • Extremely lightweight (less than 1KB after gzip and minify)
  • It uses the native scroll events, so:
    • All the events work and are smooth (mouse wheel, space, page down, page up, arrows etc).
    • The performance is awesome!
  • No dependencies, completely vanilla Javascript!
  • RTL support (thanks to @BabkinAleksandr)

Browser Support

It was developed for evergreen browsers, but it works both on IE10 and IE11 either.

If you want to make it works down to IE9, the only thing you need to do is to add the classList polyfill.

<!--[if IE 9]><script src="classList.min.js"></script><![endif]-->

Usage

You can use this library as a script tag, or you can import it as a npm module, eg:

CommonJS

const SimpleScrollbar = require('simple-scrollbar');

ES2015 modules

import SimpleScrollbar from 'simple-scrollbar'

Auto-binding

Include the attribute ss-container in any <div> that you want to make scrollable, and the library will turn it for you

<div ss-container>One</div>
<div ss-container>
  <span>Two</span>
</div>

Manual binding

If you want to manually turn your div in a SimpleScrollbar, you can use the SimpleScrollbar.initEl method.

<div class="myClass"></div>

<script>
  var el = document.querySelector('.myClass');
  SimpleScrollbar.initEl(el);
</script>

Dynamically added content

If you use some client Framework, like Angular, Aurelia, etc - or any library that includes DOMElements dynamically in your app, and you want to use the SimpleScrollbar ss-container attribute, you can use the SimpleScrollbar.initAll method, and it will turn all the elements with that attribute in a scrollable one for you.

var div = document.createElement('div');
div.insertAdjacentHTML('afterbegin', '<span>One</span>');
div.setAttribute('ss-container', true);

var otherDiv = div.cloneNode(true);
otherDiv.querySelector('span').textContent = 'Two';

document.body.appendChild(div);
document.body.appendChild(otherDiv);

SimpleScrollbar.initAll();

RTL Support

Add direction: rtl; to your <div>'s CSS, and SimpleScrollbar will detect the direction automatically.

Credits

Inspired by yairEO's jQuery plugin (fakescroll)

simple-scrollbar's People

Contributors

buzinas avatar ckgrafico avatar haykokoryun avatar jetroid avatar jlmakes avatar nzx-design avatar promisetochi avatar rodrigoddalmeida avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.