Определить нижнюю часть страницы на свитке, используя Vanilla JS in ReactJS

Question

Я занимаюсь разработкой приложения React и хочу определить нижнюю часть страницы при прокрутке пользователя с помощью Vanilla JS. Я прогуглил его и обнаружил, что приведенная ниже проверка работает нормально для большинства сценариев ios -

window.innerHeight + window.scrollY) >= document.body.offsetHeight

Она отлично работает, да, когда в моем приложении реакции я не установил высоту 100vh в своем приложении. css и индекс. css. Но после установки высоты 100vh в обоих случаях это не так.

Я утешал значения вышеупомянутых параметров без высоты как 100vh и ниже был выход на устройстве Galaxy S5 -

window.innerHeight->  640 window.scrollY -> 0 document.body.offsetHeight->  265

Утешением значений вышеприведенных параметров с высотой 100vh и ниже был выход на устройстве Galaxy S5 -

window.innerHeight->  640 window.scrollY -> 0 document.body.offsetHeight->  640

Ниже код handleScroll:

  handleScroll = () => {
    const {
      totalUsersCount, users, currentPage, fetchUsersList,
    } = this.props;
    console.log('window.innerHeight-> ', window.innerHeight, 'window.scrollY ->', window.scrollY,
      'document.body.offsetHeight-> ', document.body.offsetHeight);
    if (((window.innerHeight + window.scrollY) >= document.body.offsetHeight)) {
      fetchUsersList(currentPage + 1);
    }
  };

Как проверить нижнюю часть прокрутки страницы, когда В Vanilla JS высота установлена ​​на 100vh, как я это делал в React.

Answer 1

Когда вы устанавливаете рост в 100vh, scrollHeight останется высотой вашего окна, какой бы ни была общая длина контента. scrollHeight на самом деле не возвращает высоту всего вашего контента (как вы ожидаете), но видимое пространство, в котором он может прокручиваться.

То, что вы хотите, это не height css значение свойства, но max-height.

Попробуйте изменить css на

body {
  /* height: 100vh; */
  max-height: 100vh;
  overflow: auto;
}

Кроме того, я не думаю, что для этого стоит полагаться на высоту окна, так как вы можете позже захотеть обернуть область прокрутки (например, добавив заголовок), таким образом, вы потеряете дополнительный вес и можете получить ошибки в своих вычислениях. Если у вас есть ссылка (более детальная в React или с анализом DOM vanilla) на элемент, который обрабатывает прокрутку (элемент, содержащий вашу полосу прокрутки), вы можете использовать следующий тест в функции прокрутки:

handleScroll = () => {
  //...
  if (target.scrollTop >= (target.scrollHeight - target.offsetHeight)) {
    //... your stuff
  }
}

Поскольку сейчас ваша цель - тело, вы можете просто:

handleScroll = () => {
  //...
  if (document.body.scrollTop >= (document.body.scrollHeight - document.body.offsetHeight)) {
    //... your stuff
  }
}

Answer 2

Вам необходимо использовать document.body.scrollHeight, чтобы получить фактическую высоту.

Ссылка: https://javascript.info/size-and-scroll-window#width Высота документа

ОБНОВЛЕНО: для конкретный элемент c использует любой из селекторов и получает его высоту прокрутки.

const el = document.getElementById('#id');
const scrollHeight = el.scrollHeight;