Как реализовать бесконечную прокрутку, используя собственный JavaScript?

Question

Как мне реализовать бесконечную / бесконечную прокрутку (например, Facebook) в моем проекте без каких-либо библиотек или фреймворков ?

Почти во всех руководствах показано, как это сделать с jQuery, React и Angular, но я хочу встроенную реализацию JavaScript для бесконечной прокрутки.

Answer 1

Вот фрагмент кода с бесконечной / бесконечной прокруткой, написанный на нативном JavaScript:

window.onscroll = function () {
    if (window.scrollY > (document.body.offsetHeight - window.outerHeight)) {
        console.log("It's working!");                            
    }
}

Чтобы добавить задержку к выполнению этой функции (если вы отправляете запросы на сервер, это обязательно), вы можете написать это так:

window.onscroll = infiniteScroll;

    // This variable is used to remember if the function was executed.
    var isExecuted = false;

    function infiniteScroll() {
        // Inside the "if" statement the "isExecuted" variable is negated to allow initial code execution.
        if (window.scrollY > (document.body.offsetHeight - window.outerHeight) && !isExecuted) {
            // Set "isExecuted" to "true" to prevent further execution
            isExecuted = true;

            // Your code goes here
            console.log("Working...");

            // After 1 second the "isExecuted" will be set to "false" to allow the code inside the "if" statement to be executed again
            setTimeout(() => {
                isExecuted = false;
            }, 1000);
        }
    }

Я использую его в своем ASP.NET MVC 5 проекте, и он работает как шарм.

Примечание: Этот фрагмент кода не работает в некоторых браузерах (я смотрю на вас, IE). Свойство window.scrollY для IE undefined.