There is a page that performs further code depending on the footer coordinates:

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); } } }

In Chrome, everything works correctly at any screen resolution and page scale. In Firefox, at a screen resolution of 1920x1280, it works only at a page scale of 150%, at other scales it does not work.

Footer's style:

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

    1 answer 1

    Crutch to solve the problem: in the condition of footerCoordinates you can check the property top , not bottom . Then, in any browser and at any resolution, the function always works.

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