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

时间:2016-10-03 21:36:57

标签: javascript arrays

我想要做的是在浏览器中显示一个数组(无休止地重复)。但是,即使我可以从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(即twofousix等等正在跳跃可以这么说,一旦元素的顶部到达浏览器的顶部。我相信这种情况发生的原因是因为每个listing向上移动了一个位置,所以我尝试添加以下代码(无论出于何种原因,它都与没有它的情况完全相同)。

附加CSS

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

其他JS

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

listingsContainer.insertBefore(spacer, first);

我不知所措。请帮忙!

1 个答案:

答案 0 :(得分:1)

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

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

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