如何解决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 举报,一经查实,本站将立刻删除。