Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 2 months ago
JSON representation
A set of components that react to page scrolling
- Host: GitHub
- URL: https://github.com/jeroencoumans/react-scroll-components
- Owner: jeroencoumans
- License: mit
- Created: 2014-04-27T14:31:55.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-09-14T23:49:58.000Z (about 8 years ago)
- Last Synced: 2024-09-18T17:26:26.521Z (3 months ago)
- Language: JavaScript
- Size: 254 KB
- Stars: 123
- Watchers: 4
- Forks: 17
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-scroll-components - A set of components that react to page scrolling. (Uncategorized / Uncategorized)
- awesome-react-components - react-scroll-components - A set of components that react to page scrolling. (UI Utilities / Device Input)
- awesome-react - react-scroll-components - A set of components that react to page scrolling. ![](https://img.shields.io/github/stars/jeroencoumans/react-scroll-components.svg?style=social&label=Star) (UI Components / Device Input/User Action)
- awesome-list - react-scroll-components - A set of components that react to page scrolling. (UI Utilites / Device Input)
- awesome-react-components - react-scroll-components - A set of components that react to page scrolling. (UI Utilities / Device Input)
- awesome-react-components - react-scroll-components - A set of components that react to page scrolling. (UI Utilities / Device Input)
- awesome-react-components - react-scroll-components - A set of components that react to page scrolling. (UI Utilities / Device Input)
- fucking-awesome-react-components - react-scroll-components - A set of components that react to page scrolling. (UI Utilities / Device Input)
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 documentYou 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.
)
}
})
```