Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jeroencoumans/react-scroll-components

A set of components that react to page scrolling
https://github.com/jeroencoumans/react-scroll-components

Last synced: 3 months ago
JSON representation

A set of components that react to page scrolling

Awesome Lists containing this project

README 

        
react-scroll-components

=======================



A set of components and mixins that react to page scrolling



## ScrollListenerMixin



This mixin provides the following states:

* `scrollTop`, which represents the documents' current scroll position

* `isScrolling`, wether the user is currently scrolling the document



You can pass the following methods to your React class:

* `onPageScroll`: fired when the document is scrolling. This function gets the

current scroll position passed as argument.

* `onPageScrollEnd`: fired when the document's scroll position hasn't changed for

300 milliseconds. This function also gets the current scroll position passed as

argument. If you want to change the timeout, override your components'

`endScrollTimeout`



## ScrollBlocker



A very simple component that allows you to block any mouse events during

scrolling.



## Example



```javascript

var MyComponent = React.createClass({

	mixins: [ScrollListenerMixin],

	render: function () {

		return (

			

				The current scroll position is {this.state.scrollTop}.


				The document is currently {this.state.isScrolling ? '' : 'not'} scrolling.

			

		)

	}

})

```