Проверьте, достиг ли пользователь нижней части элемента прокрутки (не только окна)

Вот достаточно простой подход:

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight;

Пример использования:

elm.onscroll = function() {
    if (elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // Пользователь прокрутил до конца элемента
    }
}

Где elm — это элемент, полученный, например, с помощью document.getElementById.

Этот код вычисляет расстояние от прокрутки до низа элемента. Если значение равно 0, это означает, что ползунок прокрутки достиг дна элемента.

Для лучшего понимания:

• elem.scrollHeight — это полная высота содержимого элемента, включая скрытую часть.
• elem.scrollTop — это текущее значение прокрутки сверху.
• elem.clientHeight — это высота видимой части элемента.

Таким образом, разность elem.scrollHeight - elem.scrollTop - elem.clientHeight дает нам информацию о том, сколько осталось прокрутить до низа элемента.

Ваше решение на чистом JavaScript выглядит вполне корректно. Вот как оно работает:

Вы добавляете обработчик события scroll для элемента с ID el. Внутри этого обработчика проверяется, достиг ли пользователь дна элемента. Это делается путём сравнения scrollHeight - scrollTop - clientHeight с нулем. Если это выражение равно нулю или меньше, отображается предупреждение 'Bottom'.

Вот ваш код:

let el = document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight <= 0) {
        alert('Bottom');
    }
});

Также обязательно добавьте CSS для вашего элемента, чтобы активировать вертикальную прокрутку:

#el {
  width: 400px;
  height: 100px;
  overflow-y: scroll;
}

И не забудьте про HTML-разметку с несколькими элементами:

<div id="el">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>

Если все сделано правильно, при прокрутке до конца элемента будет отображаться предупреждение. Это полезно для случаев, когда вам нужно знать, когда пользователь достигает дна списка или контента.

Если у вас будут дополнительные вопросы или вам потребуется помощь с улучшением кода, не стесняйтесь спрашивать!

В ответ на ваш вопрос, стоит учесть, что если не округлять значение прокрутки, у вас могут возникнуть проблемы. Например, функции могут срабатывать несколько раз при прокрутке или вообще не работать, если пользователь изменил масштаб окна. Я нашел простое решение: просто используйте Math.round для округления высоты прокрутки, и это будет работать, как предполагалось.

Вот пример кода:

if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()) {
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

Использование Math.round помогает избежать проблем с плавающей точкой и делает ваше решение более надежным.

Вы можете реализовать это с помощью чистого JavaScript очень простым способом. Просто используйте следующий код:

function onScroll() {
    if (window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight - 50) {
        console.log('Достигнут нижний край');
    }
}
window.addEventListener("scroll", onScroll);

Этот код добавляет обработчик события прокрутки (scroll), который проверяет, достиг ли пользователь дна страницы (или почти дна, учитывая отступ в 50 пикселей). Когда условие выполняется, в консоль выводится сообщение. Убедитесь, что у вас правильно написано console.log — у вас была опечатка в Console.log.