javascript - 达到25个唯一div的末尾后，再加载5个div。 5行，每行5格

Question

我有25个div，每行5个div。
每个div为20vw。
有5行显示所有div。
当我们向下滚动到最后5个div时，我希望页面在加载后立即加载前5个div，因此它成为循环循环滚动。

我在网上找到了一些脚本和技术。我实现了它们，但是到目前为止没有任何效果。

这是我找到的最接近的代码：
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/