React Scroll

React component for animating vertical scrolling ### Install ```js $ npm install react-scroll ``` ### Run ```js $ npm install $ npm test $ npm start ``` ### Examples Checkout examples Live example > [Basic](https://codesandbox.io/s/basic-6t84k) > [Basic-Keydown](https://codesandbox.io/s/l94kv62o4m) > [Container](https://codesandbox.io/s/3zznv27l5) > [With-hash](https://codesandbox.io/s/y0zzrk1v1j) > [With-overflow](https://codesandbox.io/s/l94kv62o4m) > [Code](https://github.com/fisshy/react-scroll/blob/master/examples/basic/app.js) ```js $ npm start ``` ### Usage ```js // ES6 Imports import * as Scroll from 'react-scroll'; import { Link, Button, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll' // Or Access Link,Element,etc as follows let Link = Scroll.Link; let Button = Scroll.Button; let Element = Scroll.Element; let Events = Scroll.Events; let scroll = Scroll.animateScroll; let scrollSpy = Scroll.scrollSpy; // ES5 var React = require('react'); var Scroll = require('react-scroll'); var Link = Scroll.Link; var Button = Scroll.Button; var Element = Scroll.Element; var Events = Scroll.Events; var scroll = Scroll.animateScroll; var scrollSpy = Scroll.scrollSpy; var Section = 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 (

Test 1 Test 2 (delay) Test 6 (anchor) test 1 test 2

test 6 (anchor)

Go to first element inside container Go to second element inside container

first element inside container second element inside container

To the top!
To the bottom!
Scroll to 100px from the top
Scroll 100px more from the current position!

); } }); React.render(

, document.getElementById('example') ); ``` ### Props/Options

activeClass	class applied when element is reached
activeStyle	style 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
horizontal	Whether to scroll vertically (`false`) or horizontally (`true`) - default: `false`
spyThrottle	Time of the spy throttle - can be a number

### Full example ```js Your name ``` ### Scroll Methods > Scroll To Top ```js var Scroll = require('react-scroll'); var scroll = Scroll.animateScroll; scroll.scrollToTop(options); ``` > Scroll To Bottom ```js var Scroll = require('react-scroll'); var scroll = Scroll.animateScroll; scroll.scrollToBottom(options); ``` > Scroll To (position) ```js var Scroll = require('react-scroll'); var scroll = Scroll.animateScroll; scroll.scrollTo(100, options); ``` > Scroll To (Element) animateScroll.scrollTo(positionInPixels, props = {}); ```js var Scroll = require('react-scroll'); var Element = Scroll.Element; var scroller = Scroll.scroller; // Somewhere else, even another file scroller.scrollTo('myScrollToElement', { duration: 1500, delay: 100, smooth: true, containerId: 'ContainerElementID', offset: 50, // Scrolls to element + 50 pixels down the page ... }) ``` > Scroll More (px) ```js var Scroll = require('react-scroll'); var scroll = Scroll.animateScroll; scroll.scrollMore(10, options); ``` ### Scroll events > begin - start of the scrolling ```js var Scroll = require('react-scroll'); var Events = Scroll.Events; Events.scrollEvent.register('begin', function(to, element) { console.log('begin', to, element); }); ``` > end - end of the scrolling/animation ```js Events.scrollEvent.register('end', function(to, element) { console.log('end', to, element); }); ``` > Remove events ```js 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) ```js var React = require('react'); var Scroll = require('react-scroll'); var ScrollLink = Scroll.ScrollLink; var ScrollElement = Scroll.ScrollElement; var Element = React.createClass({ render: function () { return (

{ this.props.parentBindings.domNode = el; }}> {this.props.children}

); } }); module.exports = ScrollElement(Element); var Link = React.createClass({ render: function () { return ( {this.props.children} ); } }); 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 ```js 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](http://easings.net/) #### Changelog - [See the CHANGELOG](./CHANGELOG.md)

	Stars	Issues	Version	Updated	Created
react-custom-scrollbars	3,111	217	4.2.1	5 years ago	8 years ago
react-horizontal-scrolling-menu	610	8	4.0.1	a day ago	5 years ago
react-scroll	4,032	216	1.8.9	3 months ago	8 years ago
react-scrollarea			0.6.15	5 years ago	6 years ago

react-custom-scrollbars vs react-horizontal-scrolling-menu vs react-scroll vs react-scrollarea

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past