Javascript 为什么赢了'；该数组是否按照其对应的JS显示？

我要做的是在浏览器中显示一个数组（它会不断重复）。但是，即使我可以从控制台.logs中判断数组是否正常循环，但最终在浏览器中显示的内容并没有反映这一点，而是异常运行。下面是代码，解释了我认为正在发生的事情，以及我解决问题的一次失败尝试

HTML 附加JS

---

我不知所措。请帮忙

您在那里有两种效果的视觉组合：
-常规滚动
-语句“listingsContainer.removeChild（）”和“listingsContainer.appendChild（）”

因此，一旦常规平滑滚动达到窗口高度的三分之一，显示屏将再跳三分之一

我不太清楚您想要完成什么。删除并附加第一个子项后，您可能需要向后滚动三分之一。

---

如果是这种情况，请使用scrollBy（）或scrollTo（）为了达到预期的效果。

很遗憾，我无法清楚地理解您想要做什么。您是否希望在所有列表之间留出一些空间？@Franco对此表示抱歉。我将尝试更好地解释。我想创建一个列表，您可以永远滚动，当您滚动通过它时，删除屏幕顶部的每个项目，然后然后将该项重新附加到列表底部。这有意义吗？我想创建一个“无止境”列表，而不影响滚动条的大小。“我相信每个列表都向上移动了一个点。”“-嗯，是的，当您从dom中删除第一个子对象时会发生这种情况。空旷并不能保持斑点的高度。你可以通过创建越来越多的元素，或者改变顶部的高度/边距/填充来修复它。@Bergi你读过整篇文章吗？这正是我试图做的，但由于某些原因，它不起作用…@user2230470是的，方法很好，但我的意思是，每次移除一个元素时，都需要更改间距，即增加间隔高度，使其与可能存在的多个元素相匹配。静态CSS无法解决这一问题，而且您的代码还不能动态地调整间隔符的高度。或者您是否在

test

函数中添加了“额外的js”？我已经尝试过使用

listingsContainer.scrollTop（-oneThird））

但是“如果该数字是负值，则该数字设置为

0

”（）。将其添加为If块的最后一行：

listingsContainer.scrollTop-=oneThird天哪，你是冠军兄弟！我不知道为什么我没想到要试试。很高兴能帮上忙。你仍然没有无限的滚动。当然，您还必须处理反向滚动。是的，我注意到了。我还没来得及真正思考它，所以我不知道为什么它不会是无限的？？？：很好地指出，我必须处理相反的问题。哦，现在我记得为什么我放弃了尝试使用负滚动，因为如果有人用滚动条滚动并且拿着滚动条，它不会向后滚动
<div id="listings-container">
  <div class="listing" id="one"></div>
  <div class="listing" id="two"></div>
  <div class="listing" id="thr"></div>
  <div class="listing" id="fou"></div>
  <div class="listing" id="fiv"></div>
  <div class="listing" id="six"></div>
  <div class="listing" id="sev"></div>
  <div class="listing" id="eig"></div>
</div>

var listingClass      = document.getElementsByClassName('listing');
var listingsArray     = [];
var listingsContainer = document.getElementById('listings-container');
var moveOne           = window.innerHeight / 3;
var oneThird          = window.innerHeight / 3;

for (var i = 0; i < listingClass.length; i++) {
    listingsArray.push(listingClass[i]);
};

listingsContainer.addEventListener('scroll', test);
function test(){
    var first = listingsArray[0];
    if (listingsContainer.scrollTop >= moveOne) {
        moveOne += oneThird;
        listingsArray.shift();
        listingsArray.push(first);
        listingsContainer.removeChild(first);
        listingsContainer.appendChild(first);
        console.log(listingsArray);
    };
    console.log(listingsArray);
};

 #listings-container:first-child {
     height: 33.33vh; /* same height as listings class */
 }

var spacer = document.createElement('div');

listingsContainer.insertBefore(spacer, first);