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

@kwooshung/react-overlay-scrollbars-smooth

v2.0.2

Published

A React scrollbar custom component that hides the native scrollbar, provides a custom style overlay scrollbar, and retains the native functionality and feel while having scrolling inertia.

Downloads

274

Readme

React Overlay Scrollbars Smooth

This integration plugin is based on OverlayScrollbars and smoothscroll-for-websites. It conceals the native scrollbars and provides a custom-styled overlay scrollbar that retains native functionality and feel, with the added benefit of inertial scrolling.

GitHub License GitHub Release Date - Published_At GitHub last commit GitHub code size in bytes GitHub top language GitHub pull requests GitHub issues Github Stars NPM Version Npm.js Downloads/Week Github CI/CD codecov Maintainability Gitee Repo

Why Develop It?

  • I grew tired of the default browser scrollbars that look unappealing and vary across different browsers.
  • They failed to maintain a consistent appearance and behavior across various browsers and lacked deep customization options.
  • The default scrollbar doesn’t align with the design aesthetic of your website or application.
  • When pop-ups are needed, the scrollbar appears outside the popup, causing both the page's scrollbar and the popup's scrollbar to appear simultaneously, leading to a poor user experience.
  • When a Dialog/Modal pops up, it’s necessary to adjust the body’s padding-right, which requires special handling when the navigation bar is fixed, potentially causing jarring movements.
  • The scrollbar feels stiff and not smooth enough when using the mouse wheel to scroll.

Installation

npm

npm install @kwooshung/react-overlay-scrollbars-smooth

yarn

yarn add @kwooshung/react-overlay-scrollbars-smooth

pnpm

pnpm add @kwooshung/react-overlay-scrollbars-smooth

Usage

Styles

In some frameworks, you can directly introduce styles in global css / less / scss, as shown below:

@import url('@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css');

In some frameworks, such as Next.js, you may need to add the ~ character, as shown below:

@import url('~@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css');

You can also introduce it in a global page, such as the Layout page in Next.js or the corresponding component, as shown below:

import '@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css';

components

Use the OverlayScrollbarsSmooth component on an element as follows:

import { OverlayScrollbarsSmooth } from '@kwooshung/react-overlay-scrollbars-smooth';

// What is used here is to introduce secondary styles directly into the component. You can also use other methods above.
import '@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css';

function App() {
  return (
    <div style={{ height: '300px' }}>
      <OverlayScrollbarsSmooth>
        <div style={{ height: '1000px' }} />
      </OverlayScrollbarsSmooth>
    </div>
  );
}

If you want it to work on Body, you can do this:

import { OverlayScrollbarsSmooth } from '@kwooshung/react-overlay-scrollbars-smooth';

function App() {
  // No matter where this line of code is written, as long as `tag=body`, it will act on `Body`, thus replacing the default scroll bar. Don’t forget to include styles!
  return <OverlayScrollbarsSmooth tag='body' />;
}

hooks

You can directly use useSmoothScroll to achieve smooth scrolling, which will cause all scroll bars to become smooth. It is recommended to call it once in a place such as global layout, as shown below:

import { OverlayScrollbarsSmooth, useSmoothScroll } from '@kwooshung/react-overlay-scrollbars-smooth';
import '@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css';

function App() {
  useSmoothScroll();

  return (
    <div style={{ height: '300px' }}>
      <OverlayScrollbarsSmooth>
        <div style={{ height: '1000px' }} />
      </OverlayScrollbarsSmooth>
    </div>
  );
}

API

OverlayScrollbarsSmooth

The OverlayScrollbarsSmooth component supports all OverlayScrollbars APIs, you can view OverlayScrollbars API here.

| Properties | Description | | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | tag | string, default value: div, if it is: body, acts on Body, thus replacing the default scroll bar. element equivalent to OverlayScrollbars; | | className | string, default value: '', custom class name; invalid when tag=body; | | options | Equivalent to options of OverlayScrollbars, default: {scrollbars: {theme: 'os-theme-dark'}} | | events | Equivalent to events of OverlayScrollbars, default: {} |

useSmoothScroll

Supports all parameters of smoothscroll-for-websites except excluded, you can view it here smoothscroll-for-websites API , the following parameters are also default values (it is slightly different from the default value of smoothscroll-for-websites), you can modify it according to your own needs, as shown below

import { OverlayScrollbarsSmooth, useSmoothScroll } from '@kwooshung/react-overlay-scrollbars-smooth';
import '@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css';

function App() {
  useSmoothScroll({
    // Scrolling Core
    frameRate: 150, // [ms]
    animationTime: 1000, // [ms]
    stepSize: 100, // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm: true,
    pulseScale: 4,
    pulseNormalize: true,

    // Acceleration
    accelerationDelta: 50,
    accelerationMax: 3,

    // Keyboard Settings
    keyboardSupport: true,
    arrowScroll: 50,

    // Other
    touchpadSupport: false, // ignore touchpad by default
    fixedBackground: true
  });

  return (
    <div style={{ height: '300px' }}>
      <OverlayScrollbarsSmooth>
        <div style={{ height: '1000px' }} />
      </OverlayScrollbarsSmooth>
    </div>
  );
}

Open source projects used

Thanks to the project authors for their selfless contributions to the open source community, making our work easier! ! !

LICENSE

MIT