Неправильно срабатывает javascript код в Firefox

307
26 ноября 2016, 18:50

Есть страница, которая выполняет дальнейший код в зависимости от координат 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; 
}

Answer 1

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

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

READ ALSO
Поменять местами div используя только float

Поменять местами div используя только float

Имея консткрукцию такого вида нужно поменять местами дивы (так, чтобы было 213 и 312) используя только св-ва floatДополнительные обертки не допускаются

384
html5 video ширина ролика

html5 video ширина ролика

каким образом можно растянуть html5 видео? оно сохраняет пропорциивидел вариант с

411
Верстка: main и aside во всю высоту страницы

Верстка: main и aside во всю высоту страницы

Подскажите, как растянуть блоки на всю высоту страницы?

452
Bootstrap Carousel

Bootstrap Carousel

В общем, загвоздка такаяИзображения из слайдера и переключатели (черные метки, при клике на которые сменяется картинка) не показываются в мобильном...

425