React Scroll

Component for animating vertical scrolling.

Install

$npminstallreact-scroll

Run

$npminstall$npmtest$npmstart

Examples

Checkout examples

Live example

Basic

Basic-Keydown

Container

With-hash

With-overflow

Code

$npmstart

Usage

// ES6 Importsimport*asScrollfrom'react-scroll';import{Link,Element,Events,animateScrollasscroll,scrollSpy,scroller}from'react-scroll'// Or Access Link,Element,etc as followsletLink=Scroll.Link;letElement=Scroll.Element;letEvents=Scroll.Events;letscroll=Scroll.animateScroll;letscrollSpy=Scroll.scrollSpy;// ES5varReact=require('react');varScroll=require('react-scroll');varLink=Scroll.Link;varElement=Scroll.Element;varEvents=Scroll.Events;varscroll=Scroll.animateScroll;varscrollSpy=Scroll.scrollSpy;varSection=React.createClass({componentDidMount: function(){Events.scrollEvent.register('begin',function(to,element){console.log("begin",arguments);});Events.scrollEvent.register('end',function(to,element){console.log("end",arguments);});scrollSpy.update();},componentWillUnmount: function(){Events.scrollEvent.remove('begin');Events.scrollEvent.remove('end');},scrollToTop: function(){scroll.scrollToTop();},scrollToBottom: function(){scroll.scrollToBottom();},scrollTo: function(){scroll.scrollTo(100);},scrollMore: function(){scroll.scrollMore(100);},handleSetActive: function(to){console.log(to);},render: function(){return(<div><LinkactiveClass="active"to="test1"spy={true}smooth={true}offset={50}duration={500}onSetActive={this.handleSetActive}>
Test 1
</Link><LinkactiveClass="active"to="test1"spy={true}smooth={true}offset={50}duration={500}delay={1000}>
Test 2 (delay)
</Link><LinkclassName="test6"to="anchor"spy={true}smooth={true}duration={500}>
Test 6 (anchor)
</Link><ButtonactiveClass="active"className="btn"type="submit"value="Test 2"to="test2"spy={true}smooth={true}offset={50}duration={500}>
Test 2
</Button><Elementname="test1"className="element">
test 1
</Element><Elementname="test2"className="element">
test 2
</Element><divid="anchor"className="element">
test 6 (anchor)
</div><Linkto="firstInsideContainer"containerId="containerElement">
Go to first element inside container
</Link><Linkto="secondInsideContainer"containerId="containerElement">
Go to second element inside container
</Link><divclassName="element"id="containerElement"><Elementname="firstInsideContainer">
first element inside container
</Element><Elementname="secondInsideContainer">
second element inside container
</Element></div><aonClick={this.scrollToTop}>To the top!</a><br/><aonClick={this.scrollToBottom}>To the bottom!</a><br/><aonClick={this.scrollTo}>Scroll to 100px from the top</a><br/><aonClick={this.scrollMore}>Scroll 100px more from the current position!</a></div>);}});React.render(<Section/>,document.getElementById('example'));

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 its targets position

hashSpy - update hash based on spy, containerId has to be set to scroll a specific element.

smooth - animate the scrolling

offset - scroll additional px ( like padding )

duration - time of the scroll animation - can be a number or a function (function (scrollDistanceInPx) { return duration; }), that allows more granular control at run-time

delay - wait x milliseconds before scroll

isDynamic - in case the distance has to be recalculated - if you have content that expands etc.

onSetActive - invoke whenever link is being set to active

onSetInactive - invoke whenever link is lose the active status

ignoreCancelEvents - ignores events which cancel animated scrolling

<LinkactiveClass="active"to="target"spy={true}smooth={true}hashSpy={true}offset={50}duration={500}delay={1000}isDynamic={true}onSetActive={this.handleSetActive}onSetInactive={this.handleSetInactive}ignoreCancelEvents={false}>
Your name
</Link>

Scroll Methods

Scroll To Top

varScroll=require('react-scroll');varscroll=Scroll.animateScroll;scroll.scrollToTop(options);

Scroll To Bottom

varScroll=require('react-scroll');varscroll=Scroll.animateScroll;scroll.scrollToBottom(options);

Scroll To (position)

varScroll=require('react-scroll');varscroll=Scroll.animateScroll;scroll.scrollTo(100,options);

Scroll To (Element)

animateScroll.scrollTo(positionInPixels, props = {});

varScroll=require('react-scroll');varElement=Scroll.Element;varscroller=Scroll.scroller;<Elementname="myScrollToElement"></Element>// Somewhere else, even another filescroller.scrollTo('myScrollToElement',{duration: 1500,delay: 100,smooth: true,containerId: 'ContainerElementID',offset: 50,// Scrolls to element + 50 pixels down the page
...
})

Scroll More (px)

varScroll=require('react-scroll');varscroll=Scroll.animateScroll;scroll.scrollMore(10,options);

Scroll events

begin - start of the scrolling

varScroll=require('react-scroll');varEvents=Scroll.Events;Events.scrollEvent.register('begin',function(to,element){console.log("begin",to,element);});

end - end of the scrolling/animation

Events.scrollEvent.register('end',function(to,element){console.log("end",to,element);});

Remove events

Events.scrollEvent.remove('begin');Events.scrollEvent.remove('end');

Create your own Link/Element

Simply just pass your component to one of the high order components (Element/Scroll)

varReact=require('react');varScroll=require('react-scroll');varScrollLink=Scroll.ScrollLink;varScrollElement=Scroll.ScrollElement;varElement=React.createClass({render: function(){return(<div{...this.props}>{this.props.children}</div>);}});module.exports=ScrollElement(Element);varLink=React.createClass({render: function(){return(<a{...this.props}>{this.props.children}</a>);}});module.exports=ScrollLink(Link);

Scroll Animations

Add a custom easing animation to the smooth option. This prop will accept a Boolean if you want the default, or any of the animations listed below

scroller.scrollTo('myScrollToElement',{duration: 1500,delay: 100,smooth: "easeInOutQuint",containerId: 'ContainerElementID',
...
})

List of currently available animations:

linear
- no easing, no acceleration.
easeInQuad
- accelerating from zero velocity.
easeOutQuad
- decelerating to zero velocity.
easeInOutQuad
- acceleration until halfway, then deceleration.
easeInCubic
- accelerating from zero velocity.
easeOutCubic
- decelerating to zero velocity.
easeInOutCubic
- acceleration until halfway, then deceleration.
easeInQuart
- accelerating from zero velocity.
easeOutQuart
- decelerating to zero velocity.
easeInOutQuart
- acceleration until halfway, then deceleration.
easeInQuint
- accelerating from zero velocity.
easeOutQuint
- decelerating to zero velocity.
easeInOutQuint
- acceleration until halfway, then deceleration.

A good visual reference can be found at easings.net

Changelog

• See the CHANGELOG