Это проблема вашего состояния. Из консоли я заметил, что 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
.