nodelist.removeChild只工作一次

问题描述

我正在尝试使用有限的物品制作一个无限的图像滑块。逻辑是-滚动后，当一项滚动通过并在屏幕上不再可见时，它将添加到列表的末尾。这样，节点列表将永远不会结束。但是，这仅适用于第一个元素，而不是保留在该元素的位置并在末尾有一个副本（共制作（6 + 1）个项目，将第一个项目删除并放在末尾。同样，如果您知道一种更好的方法为此，请让我知道。Application

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
    <script defer src="./script.js"></script>
</head>

<body>
    <div class="project-container">
        <div class="project">1</div>
        <div class="project">2</div>
        <div class="project">3</div>
        <div class="project">4</div>
        <div class="project">5</div>
        <div class="project">6</div>
    </div>
</body>
</html>

JavaScript：

var container = document.querySelector(".project-container")
console.log(container.childNodes[0])


var scrolled = 0;


container.addEventListener("scroll",e => {
    console.log(scrolled)
    if (container.scrollLeft - scrolled >= 395) {
        scrolled += 395;
        nodeItem = container.childNodes[0];
        container.appendChild(nodeItem);
    }
})

CSS：

*,*::before,*::after{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-size:100px;
}

.project-container{
    /* display: flex; */
    width:1500px;
    height:400px;
    background-color: rgb(15,207,224);
    margin:auto;
    margin-top:60px;
    white-space: nowrap;
    overflow: auto;
}

.project{
    margin:40px;
    display: inline-block;
    height:300px;
    width:350px;
    background-color:white;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript scroll slide

nodelist.removeChild只工作一次

问题描述

解决方法

相关问答