react-custom-scroll

React-Custom-Scroll

An easily designable, cross browser (!!), custom scroll with ReactJS
Animations and scroll rate exactly like native scroll

See a working demo

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 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.

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

<CustomScroll>
  your content
</CustomScroll>

To design the scroll handle, change the inner-handle class css properties in customScroll.css

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.
• 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.

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
• Check if your height limit is relative to parent, and you didn't use heightRelativeToParent prop.

Tests

npm install
npm test
# Or for continuous run
karma start