1

Есть страница, которая выполняет дальнейший код в зависимости от координат footer'а:

window.addEventListener('scroll', function() {
  if (window.pageYOffset > 0) {
    scrollUp.style.display = 'block';
  } else {
    scrollUp.style.display = 'none';
  }
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(addPageOnScroll, SCROLL_TIMEOUT);
});

/**
 * (адаптация для больших разрешений). */
window.addEventListener('load', addPageOnScroll);

function addPageOnScroll() {

  //определяем положение футера относительно экрана
  var footerCoordinates = document.querySelector('footer').getBoundingClientRect();

  //определяем высоту экрана
  var viewportSize = document.documentElement.offsetHeight;

  //футер виден хотя бы частично
  if (footerCoordinates.bottom <= viewportSize) {
    if (currentPage < Math.ceil(filteredPosts.length / PAGE_SIZE)) {
      wall.renderPosts(filteredPosts, ++currentPage, false);
    }
  }
}

В Chrome все работает корректно при любом разрешении экрана и масштабе страницы. В Firefox при разрешении экрана 1920x1280 работает только при масштабе страницы в 150%, при других масштабах не работает.

Стиль footer'а:

footer {
    width: 100%;
    height: 50px;
    background-color: #0960bb;
}

1 ответ 1

0

Костыль для решения проблемы: в условии у footerCoordinates можно проверять свойство top, а не bottom. Тогда в любом браузере и при любом разрешении функция срабатывает всегда.

//футер виден хотя бы частично
if (footerCoordinates.top <= viewportSize) {
  if (currentPage < Math.ceil(filteredPosts.length / PAGE_SIZE)) {
    wall.renderPosts(filteredPosts, ++currentPage, false);
  }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.