Проблема со scroll в JS

Question

Есть задача: сделать блок с новостями и их прокруткой скроллом. Как только скролл оказывается в самом низу - подгружать новые новости.

У меня есть: <div class="news-conatiner" onscroll="LoadNews(this)"> в котором находятся пока 2 div'а следующей структуры:

         <div>
            <p><b>Заголовок новости 1</b></p>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem sequi repellendus obcaecati necessitatibus maxime? Quisquam quos dolorum nihil corporis obcaecati libero, temporibus, omnis quae rem placeat perferendis ullam numquam. Animi?
            </p>
        </div>

Скрипт делает следующее:

const isScrollbarAtBottom = (element) => element.offsetHeight + element.scrollTop == element.scrollHeight ? true : false;

function LoadNews(element) {

    if (isScrollbarAtBottom(element)) {

        let newDiv = document.createElement("div");
        let newPHeader = document.createElement("p");
        let newPText = document.createElement("p");

        newPHeader.textContent = keysIter.next().value;
        newPHeader.style.fontWeight = "bold";

        newPText.textContent = valuesIter.next().value;
        newDiv.appendChild(newPText);
        newDiv.appendChild(newPHeader);
        element.appendChild(newDiv);
    }
}

valuesIter и keysIter указывают на Map, в котором уже заготовлены новости.

И вот чертов парадокс, который я не понимаю, почему отслеживание позиции скролла в конечной позиции успешно происходит только тогда, когда я нажимаю F12, чтобы перейти к отладке и т.д., но не работает при стартовом виде странице?

Answer 1

Вместо == в стрелочной функции isScrollbarAtBottom необходимо использовать >=.

Рабочий вариант:

const isScrollbarAtBottom = (element) => element.offsetHeight + element.scrollTop >= element.scrollHeight ? true : false;

БЛОГ НА HUSL

Проблема со scroll в JS

Ответы (1 шт):