trick-scrollbar

The native browser's scrollbar customized with some magic tricks ✨

Why trick-scrollbar?

trick-scrollbar don't emulate a scroll, it's the browser's own scroll but customized with some magic tricks.

Coming soon..

First, don't set the CSS overflow as hidden because the scroll won't work.

<style>
  .scroll {
    height: 100%;
    width: 100%;
    overflow: auto;
  }
</style>

You need to include the trick-scrollbar.css file.

<link rel="stylesheet" href="css/trick-scrollbar.css">

Import from ES module:

import TrickScrollbar from 'trick-scrollbar'

Import in browser:

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

Initialise:

const scrollContainer = document.querySelector('.scroll')
const scroller = new TrickScrollbar(scrollContainer)