我想要做的是在浏览器中显示一个数组(无休止地重复)。但是,即使我可以从console.logs
确定阵列正在正常循环,但最终在浏览器中显示的内容并不能反映这一点,而是会异常地进行操作。 Here is a Fiddle。下面是代码,解释我认为发生了什么,以及我尝试解决问题的失败之一。
<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);
};
正在发生的事情是,当您向下滚动时,其他listing
(即two
,fou
,six
等等正在跳跃可以这么说,一旦元素的顶部到达浏览器的顶部。我相信这种情况发生的原因是因为每个listing
向上移动了一个位置,所以我尝试添加以下代码(无论出于何种原因,它都与没有它的情况完全相同)。
#listings-container:first-child {
height: 33.33vh; /* same height as listings class */
}
var spacer = document.createElement('div');
listingsContainer.insertBefore(spacer, first);
我不知所措。请帮忙!
答案 0 :(得分:1)
你有两种效果的视觉组合:
- 常规滚动
- 语句“listingsContainer.removeChild()”和“listingsContainer.appendChild()
因此,一旦常规平滑滚动达到窗口高度的三分之一,显示屏将再跳跃三分之一。
我不确定你想要完成什么。移除并附加第一个孩子后,您可能需要向后滚动三分之一 如果是这种情况,请使用scrollBy()或scrollTo()来实现所需的效果。