npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kigi/overlayscrollbars

v1.0.0

Published

A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

Downloads

87

Readme

OverlayScrollbars is a javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

Why

I've created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.

Goals & Features

  • A simple, powerful and good documented API.
  • High browser compatibility (IE8+, Safari6+, Firefox, Opera, Chrome and Edge).
  • Usage of the most recent technologies to ensure maximum efficiency and performance on newer browsers.
  • Can be used without any dependencies or with jQuery.
  • Automatic update detection - after the initialization you don't have to worry about updating.
  • Extremely powerful scroll method with features like animations, relative coordinates, scrollIntoView and more.
  • Mouse and touch support.
  • Textarea and Body support.
  • RTL Direction support. (with normalization)
  • Simple and effective scrollbar-styling.
  • Rich extension system.
  • TypeScript support.

Framework Wrapper

OverlayScrollbars provides its own wrapper components for popular component-based front-end frameworks:

README

npm install overlayscrollbars-react

README

npm install overlayscrollbars-vue

README

npm install overlayscrollbars-ngx

Sponsors

Dependencies

The default version doesn't requires any dependencies!

If you are using the jQuery dependent version it obviously requires jQuery to work.
It was tested with the jQuery versions: 1.9.1, 2.x, 3.x, and it won't work with jQuery slim.

Download

manually

Download OverlayScrollbars manually from Releases.

cdn

You can use OverlayScrollbars via a cdn.

npm

OverlayScrollbars can be downloaded from npm.

npm install overlayscrollbars

Usage

HTML

Load your CSS file(s) before the JS file(s), to prevent unexpected bugs.

Include OverlayScrollbars.css and OverlayScrollbars.js to your HTML file.

<!-- Plugin CSS -->
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
<!-- Plugin JS -->
<script type="text/javascript" src="path/to/OverlayScrollbars.js"></script>

If you are using the jQuery version, include jQuery before the plugin and use jquery.overlayScrollbars.js

<!-- Plugin CSS -->
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
<!-- jQuery JS -->
<script type="text/javascript" src="path/to/jquery.js"></script>
<!-- Plugin JS -->
<script type="text/javascript" src="path/to/jquery.overlayScrollbars.js"></script>

JavaScript

Initialize the plugin after your document has been fully loaded.

Default initialization:

document.addEventListener("DOMContentLoaded", function() {
    //The first argument are the elements to which the plugin shall be initialized
    //The second argument has to be at least a empty object or a object with your desired options
    OverlayScrollbars(document.querySelectorAll('body'), { });
});

jQuery initialization:

$(function() {
    //The passed argument has to be at least a empty object or a object with your desired options
    $('body').overlayScrollbars({ });
});

TypeScript

OverlayScrollbars provides its own TypeScript declarations:

npm install @types/overlayscrollbars

I recommend setting these options in your tsconfig.json:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true
    }
}

Options

Due to clarity I can't provide all informations here.
Take the table below only as a overview of all options.
Please read the much more detailed documentation.

Methods

Click on the method name to open a more detailed documentation.

Instance methods:

Global methods:

Tests

It's a challenge to fully test a library like OverlayScrollbars, because it has to adapt to countless DOM setups and browsers. Nevertheless I've developed basic GUI-Tests. In these tests a element with applied OverlayScrollbars is compared to a native element.

You can run the tests by visiting this page and clicking on the Run button. Please be aware that the tests need some time to complete. After the process is complete, the results are displayed in the console.

In case some tests are failing on your end, please open a issue with the console output of the tests (the failed array in particular).

Future Plans

  • Minimize the code as much as possible.
  • Frequent updates in terms of bug-fixes and enhancements.
  • Improve tests

License

MIT