为什么根据相应的JS赢得这个数组显示？

Question

我想要做的是在浏览器中显示一个数组（无休止地重复）。但是，即使我可以从console.logs确定阵列正在正常循环，但最终在浏览器中显示的内容并不能反映这一点，而是会异常地进行操作。 Here is a Fiddle。下面是代码，解释我认为发生了什么，以及我尝试解决问题的失败之一。

HTML

<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>

JS

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);
};

正在发生的事情是，当您向下滚动时，其他listing（即two，fou，six等等正在跳跃可以这么说，一旦元素的顶部到达浏览器的顶部。我相信这种情况发生的原因是因为每个listing向上移动了一个位置，所以我尝试添加以下代码（无论出于何种原因，它都与没有它的情况完全相同）。

附加CSS

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

其他JS

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

listingsContainer.insertBefore(spacer, first);

我不知所措。请帮忙！

Answer 1

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

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

我不确定你想要完成什么。移除并附加第一个孩子后，您可能需要向后滚动三分之一 如果是这种情况，请使用scrollBy（）或scrollTo（）来实现所需的效果。