Обнаружение конца подсистемы прокрутки не работает последовательно - PullRequest
Новая
       37

Обнаружение конца подсистемы прокрутки не работает последовательно

2 голосов
/ 09 октября 2019

У меня есть простая реализация infinte scroll в React.js. Я использую event.target.scrollHeight для определения конца div. Но он не работает последовательно во всех браузерах. Например, когда я делаю высоту div как 30vh, он работает в Chrome, но не в Firefox. Если я сделаю 35vh, он будет работать в Firefox, но не в Chrome.

Я знаю, что могу использовать метод ссылочного тега, но что не так в этом подходе.

Полный код: https://codesandbox.io/s/simple-infinite-scroll-vei7g Файл кода: demo.js

1 Ответ

2 голосов
/ 09 октября 2019

Это проблема вашего состояния. Из консоли я заметил, что firefox дает значение, равное (e.target.scrollHeight - e.target.scrollTop) - 1. Это делает e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight условием возврата false. Итак, я просто изменил условие на e.target.scrollHeight <= e.target.scrollTop + e.target.clientHeight. И он отлично работает в обоих браузерах. 

  const isScrolling = e => {
    const tData =
    e.target.scrollHeight <= e.target.scrollTop + e.target.clientHeight;
    console.log("scrolling.....", divHeight, tData);

    if (tData) {
      fetchMoreListItems();
    }
  };

И то же самое, используя ref. 

  const isScrolling = () => {
    const tData =
      scrollCont.current.scrollTop + scrollCont.current.clientHeight >=
      scrollCont.current.scrollHeight;
    console.log("scrolling.....", divHeight, tData);
    if (tData) {
      fetchMoreListItems();
    }
  };

Вот кодовый элемент , который использует реализацию ref.

...