我有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,但擅长使用和修改现有代码。
最佳答案
如果您使用的是jQuery,我建议您使用.clone()
功能,然后在您即将到达最低点时使用.append()
文档在这里https://api.jquery.com/clone/
关于javascript - 达到25个唯一div的末尾后,再加载5个div。 5行,每行5格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48629775/