Отказ от ответственности - На момент написания статьи я ориентировался только на браузер Chrome.

Когда пользователь прокручивает событие прокрутки DOM, запускается событие, которое по умолчанию встроено в браузер. У React есть свой собственный метод onScroll, который может быть вызван для любого компонента при запуске события прокрутки. Используя этот метод onScroll, мы можем вызвать функцию в результате прокрутки пользователем.

Пример;

<SomeComponent onScroll={someMeothod} />

Как и в случае любого события DOM, создается объект события со свойствами, которые могут предоставить полезную информацию о событии, и элемент, с которым связано указанное событие, также связан. Событие прокрутки запускается для каждого пикселя, который прокручивает пользователь. В этом случае нас интересует только идентификация, когда пользователь прокрутил до конца родительский элемент, содержащий наш контент.

Вычисление, когда пользователь прокрутил до конца контейнера

Добавьте метод onScroll к элементу, содержащему содержимое, который вызывает функцию в классе компонентов:

<div className="content-container" onScroll={this.handleScroll}>
  // Your content
</div>

Затем создайте функцию handleScroll для обработки события прокрутки:

class MyComponent extends React.Component {
  handleScroll = e => {
    let element = e.target
    if (element.scrollHeight - element.scrollTop === element.clientHeight) {
      // do something at end of scroll
    }
  }
  render() {
    return (
      <div className="content-container" onScroll={this.handleScroll}>
        // Your content
      </div>
    )
  }
}

Давайте разберем, что происходит в методе handleScroll, чтобы сделать вещи немного понятнее…

e - это соответствует самому событию. Это объект, созданный браузером со свойствами, связанными с событием прокрутки, с которым мы работаем.

пусть элемент = e.target - это позволяет нам найти элемент, который отправил событие с помощью (e.target), и назначить его переменной, которую мы можем использовать в остальной части кода.

Теперь мы (наш код) знаем, какой элемент прокручивается, и мы назначили его переменной в области наших методов, мы можем получить доступ к свойствам этого элемента, заданным браузером, и вычислить, прокрутил ли пользователь до конца.

element.scrollHeight - это высота в пикселях содержимого элементов, включая содержимое, не видимое на экране из-за переполнения css.

element.scrollTop - высота в пикселях, по которой содержимое элемента прокручивается вертикально.

element.clientHeight - высота в пикселях прокручиваемой части элемента.

Используя вышеуказанные свойства, мы можем вычислить, прокрутил ли пользователь нижнюю часть элемента, сравнив отрицательную сумму высоты прокрутки и верхней части прокрутки с высотой клиента. Если они совпадают, пользователь прокрутил страницу до нижней части элемента. Завернув это в if оператор поэтому мы можем гарантировать, что наша функция в области действия оператора if запускается только тогда, когда пользователь прокрутил до конца div и наш if условие выполнено.