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

react-custom-scroll

v7.0.0

Published

[![NPM version][npm-image]][npm-url] ![](https://github.com/rommguy/react-custom-scroll/workflows/build/badge.svg) ![](https://img.shields.io/npm/dw/react-custom-scroll)

Downloads

51,248

Readme

NPM version

React-Custom-Scroll

An easily designable, cross browser (!!), custom scroll with ReactJS.

The actual scroll is still the native one - Meaning the scroll animations and scroll rate work as always The only thin that is different is the visible design and scrollbar layout.

See a working demo

Installation

npm i react-custom-scroll --save

Why do I need this ?

  • Same design on all browsers
  • Scrollbar is above the content instead of floating to the side - same layout on scrolled content as not scrolled content

How to use ?

Custom scroll component is available in module or commonJS format.
It is located in /dist directory
From unpkg cdn:

Wrap your content with the custom scroll component
Remove any overflow style properties from your content root component - The custom scroll will take care of it

import { CustomScroll } from "react-custom-scroll";
<CustomScroll>
  your content
</CustomScroll>

How to change the design ?

Your own custom design can be applied by styling these 2 classes in your css:

  • rcs-custom-scrollbar - this class styles the container of the scroll handle, you can use it if your handle width is greater than the default.
  • rcs-inner-handle - this class styles the handle itself, you can use it to change the color, background, border and such of the handle

You can see a usage example in the demo page.

Options (react props)

  • allowOuterScroll : boolean, default false. Blocks outer scroll while scrolling the content
  • heightRelativeToParent : string, default undefined. Content height limit is relative to parent - the value should be the height limit.
  • flex : number, default undefined. If present will apply to the content wrapped by the custom scroll.
    This prop represents flex size. It is only relevant if the parent of customScroll has display: flex. See example below.
    This prop will override any value given to heightRelativeToParent when setting the height of customScroll.
  • onScroll - function, default undefined. Listener that will be called on each scroll.
  • addScrolledClass : boolean, default false. If true, will add a css class 'content-scrolled' while being scrolled.
  • freezePosition : boolean, default false. When true, will prevent scrolling.
  • minScrollHandleHeight : number, sets the mimimum height of the scroll handle. Default is 38, as in Chrome on OSX.
  • rtl : boolean, default false. Right to left document, will place the custom scrollbar on the left side of the content, and assume the native one is also there.
  • scrollTo: number, default undefined. Will scroll content to the given value.
  • keepAtBottom: boolean, default false. For dynamic content, will keep the scroll position at the bottom of the content, when the content changes, if the position was at the bottom before the change. See example here
  • className: string, default undefined. Allows adding your own class name to the root element.
  • handleClass: string. Can be used to replace the className given to the scroll handle, which is 'rcs-inner-handle' by default.
Example for heightRelativeToParent
<CustomScroll heightRelativeToParent="calc(100% - 20px)">
  your content
</CustomScroll>  

It doesn't work, please help me

  • Check if you forgot to remove 'overflow' properties from the content root element.
  • If you're using JSX, make sure you use Pascal case and not camelCase <CustomScroll> and not <customScroll>.
    starting with lower case causes JSX to treat the tag as a native dom element
  • Make sure you have a height limit on the content root element (max-height)
  • Check if your height limit is relative to parent, and you didn't use heightRelativeToParent prop.

Typescript

  • You can use CustomScroll types by installing @types/react-custom-scroll from npm

Usage with flexbox

See a demo with Flex

There are some details that apply when using customScroll on elements with size set by css flex.
Here is an example for an HTML structure before using customScroll:

<SomeParent style="display: flex; height: 500px;">
  <FixedHeightElement style="height: 100px"><FixedHeightElement />
  <FlexibleHeightElement style="flex:1; overflow:scroll">
    your content (with enough height to cause a scroll)
  <FlexibleHeightElement />
</SomeParent>  

In this example, a scroll is active on the flexibleHeightElement, where the flex size sets it's height to 400px, after the fixedHeight element took 100px.

Solutions

There are 2 options to use customScroll with this structure:

  • Wrapping the content:
    For this solution, the overflow property should be removed from the flex size element, since the customScroll will take care of that. Instead, min-height and min-width should be set to 0.
<someParent style="display: flex; height: 500px;">
  <fixedHeightElement style="height: 100px"><fixedHeightElement/>
  <flexibleHeightElement style="flex:1; min-height: 0; min-width: 0">
    <CustomScroll heightRelativeToParent="100%">
      your content (with enough height to cause a scroll)
    <CustomScroll/>
  <flexibleHeightElement/>
</someParent>  

min-height and min-width are required since flex won't shrink below it's minimum content size (flex box spec).

  • Replacing the flex-size element with customScroll
<someParent style="display: flex; height: 500px;">
  <fixedHeightElement style="height: 100px"><fixedHeightElement/>
  <CustomScroll flex="1">
      your content (with enough height to cause a scroll)
  <CustomScroll/>
</someParent>  

Contributing

This project is built using Vite. To run in dev mode - "yarn dev" or "npm run dev". To build the project - "yarn build" or "npm run build".

Tests

npm install
npm test
# Or for continuous run
npx karma start