This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 1,000,000+ packages pre-installed, including
react-custom-scroll with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
An easily designable, cross browser (!!), custom scroll with ReactJS
Animations and scroll rate exactly like native scroll
npm i react-custom-scroll --save
Custom scroll component is available in commonJS format so you can just require it after installing.
There is also a UMD version - inside dist directory.
In both cases you have to include the customScroll.css file in your page.
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>
Your own custom design can be applied by styling these 2 classes in your css:
You can see a usage example in example/firstComp/firstComp.scss
<CustomScroll heightRelativeToParent="calc(100% - 20px)"> your content </CustomScroll>
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.
There are 2 options to use customScroll with this structure:
<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).
<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>
To build the project in watch mode, run 'npm run develop' or 'yarn develop'.
For production build - run yarn build .
npm install npm test # Or for continuous run npx karma start