React Scroll
Directive for basic scrolling and smooth scrolling.
Install
$ npm install react-scroll
Run
$ npm install$ npm test$ npm run examples
Examples
Checkout examples
Basic
Usage
var React = ;var Scroll = ; var Link = ScrollLink;var DirectLink = ScrollDirectLink;var Element = ScrollElement;var Events = ScrollEvents;var scroll = ScrollanimateScroll; var Section = React; React;
Props/Options
activeClass - class applied when element is reached
to - target to scroll to
containerId - container to listen for scroll events and to perform scrolling in
spy - make Link selected when scroll is at it's targets position
smooth - animate the scrolling
offset - scroll additional px ( like padding )
duration - time of the scroll animation
delay - wait x seconds before scroll
isDynamic - in case the distance has to be recalculated - if you have content that expands etc.
<Link activeClass="active" to="target" spy=true smooth=true offset=50 duration=500 delay=1000 isDynamic=true> Your name</Link>
Scroll Methods
Scroll To Top
var Scroll = ;var scroll = ScrollanimateScroll; scroll;
Scroll To Bottom
var Scroll = ;var scroll = ScrollanimateScroll; scroll;
Scroll To (position)
var Scroll = ;var scroll = ScrollanimateScroll; scroll;
Scroll To (Element)
animateScroll.scrollTo(positionInPixels, props = {});
var Scroll = ;var Element = ScrollElement;var scroller = Scrollscroller; <Element name="myScrollToElement"></Element> // Somewhere else, even another filescroller
Scroll More (px)
var Scroll = ;var scroll = ScrollanimateScroll; scroll;
Scroll events
begin - start of the scrolling
var Scroll = ;var Events = ScrollEvents; EventsscrollEvent;
end - end of the scrolling/animation
EventsscrollEvent;
Remove events
EventsscrollEvent;EventsscrollEvent;
Create your own Link/Element
Simply just pass your component to one of the high order components (Element/Scroll)
var React = ;var Scroll = ;var Helpers = ScrollHelpers; var Element = React; moduleexports = Helpers; var Link = React; moduleexports = Helpers;
Changelog
v1.0.24
- you can now pass any native property to Link/Element
- patched minor bugs from v1.0.21 > v1.0.24
v1.0.21
- scrollToBottom and scrollMore now works inside a container.
v1.0.20
- Published, somehow the publish failed
v1.0.19
- Property warnings has now been removed.
v1.0.18
- It's now possible to scroll within a container, checkout the code under examples.
v1.0.17
- isDynamic property has been added. To allow scrollSpy to recalculate components that expand
Things that needs to be done - feel free to contribute.
- Being able to use react-scroll within a div.
- Integrate react-scroll with react-router
- Hash-scrolling.