react-scroll-detector

react-scroll-detector

Demo

Live demo

Local demo:

git clone https://github.com/rechat/react-scroll-detector.git
cd react-scroll-detector
npm i && npm start

Installation

npm i react-scroll-detector --save

Example

import React from 'react'
import ReactScrollDetector from 'react-scroll-detector'

class App extends React.Component {
  handleScrollBottom() {
    console.log('On Scroll Bottom')
  }

  handleScrollTop() {
    console.log('On Scroll Top')
  }

  render() {
    return (
      <ReactScrollDetector
        debounceTime={500}
        accuracy={90}
        onScrollBottom={this.handleScrollBottom}
        onScrollTop={this.handleScrollTop}
      >
        <div style={{ minHeight: '500px', maxHeight: '500px', overflow: 'auto' }}>
          ...
        </div>
      </ReactScrollDetector>
    )
  }
}

API

Prop	Type	Description	Default
onScrollBottom	Function	Triggers when scroll reaches bottom	(top) => {}
onScrollTop	Function	Triggers when scroll reaches top	(top) => {}
accuracy	Number	Accuracy of detection	90
debounceTime	Number	D etection debounce time in milli seconds	500

License

MIT