An easily designable, cross browser (!!), custom scroll with ReactJS
Animations and scroll rate exactly like native scroll
See a working demo
- 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
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 overflow style properties from your content root component - The custom scroll will take care of it
<customScroll>
your content
</customScroll>- 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.
<customScroll heightRelativeToParent="calc(100% - 20px)">
your content
</customScroll> - Check if you forgot to remove 'overflow' properties from the content root element.
- Check if your height limit is relative to parent, and you didn't use heightRelativeToParent prop.