Загрузите еще 5 div после достижения 25 уникальных div. 5 рядов, 5 делений в каждом ряду

Question

У меня есть 25 дел с 5 делами в каждом ряду. Каждый div 20vw. Есть 5 строк для отображения всех div. Когда мы прокручиваем вниз до последних 5 делений, я хочу, чтобы страница загружала первые 5 делений сразу после этого, чтобы она стала бесконечной прокруткой цикла.

Я нашел несколько сценариев и методов в Интернете. Я реализовал их, но ничего не работает на данный момент.

Это ближайший код, который я нашел: https://jsfiddle.net/xt8qswab/

var doc = window.document,
                context = doc.querySelector('.js-loop'),
                clones = context.querySelectorAll('.is-clone'),
                disableScroll = false,
                scrollHeight = 0,
                scrollPos = 0,
                clonesHeight = 0,
                i = 0;

            function getScrollPos () {
                return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
            }

            function setScrollPos (pos) {
                context.scrollTop = pos;
            }

            function getClonesHeight () {
                clonesHeight = 0;

                for (i = 0; i < clones.length; i += 1) {
                  clonesHeight = clonesHeight + clones[i].offsetHeight;
                }

                return clonesHeight;
            }

            function reCalc () {
                scrollPos = getScrollPos();
                scrollHeight = context.scrollHeight;
                clonesHeight = getClonesHeight();

                if (scrollPos <= 0) {
                  setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
                }
            }

            function scrollUpdate () {
                if (!disableScroll) {
                  scrollPos = getScrollPos();

                if (clonesHeight + scrollPos >= scrollHeight) {
                    // Scroll to the top when you’ve reached the bottom
                    setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
                    disableScroll = true;
                } else if (scrollPos <= 0) {
                    // Scroll to the bottom when you reach the top
                    setScrollPos(scrollHeight - clonesHeight);
                    disableScroll = true;
                }
            }

                if (disableScroll) {
                    // Disable scroll-jumping for a short time to avoid flickering
                    window.setTimeout(function () {
                      disableScroll = false;
                    }, 40);
                }
            }

                window.requestAnimationFrame(reCalc);

                context.addEventListener('scroll', function () {
                    window.requestAnimationFrame(scrollUpdate);
                }, false);

                window.addEventListener('resize', function () {
                    window.requestAnimationFrame(reCalc);
                }, false);

Но здесь очень резкая остановка вверху оригинальной страницы. Могу ли я сгладить это? Есть ли лучшая техника для достижения этой цели?

Имейте в виду, я совсем не хорош в написании jscript, но умею использовать и изменять существующий код.

Answer 1

Если вы используете jquery, я бы порекомендовал использовать .clone() особенность, то .append() в точке, где вы почти достигли дна

Документация находится здесь https://api.jquery.com/clone/