所以基本上,我在页面底部有一个div(cv-dots-container)。当用户向下滚动页面时,此div完全可见后,我要等待3秒钟,然后在另一个按钮上触发单击功能。
我的代码实际上适用于该子句,但是,单击该其他按钮时,该页面上将添加其他元素,并且该元素(cv-dots-container)向下移动,这是预期的功能。
因此,根据我的逻辑,当用户再次向下滚动并且如果再次可见(cv-dots-container)时,我要等待3秒并再次单击。但是,我的代码似乎第一次做得很好,然后在3秒后再次单击该函数就不会停止重复该功能,而无需用户实际滚动到(cv-dots-container)的新位置。>
window.addEventListener('scroll', function() {
console.log('scrolling');
var el = document.getElementById("cv-dots-container");
var elemPosition = el.getBoundingClientRect();
var elemTop = elemPosition.top;
var elemBottom = elemPosition.bottom;
var isCompletelyVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
var isPartiallyVisible = elemTop < window.innerHeight && elemBottom >= 0;
if (isCompletelyVisible) {
console.log("partiallyVISIBLE == false");
var timer = 3;
var myInterval = setInterval(function(){
timer--;
if(timer <= 0){
clearInterval(myInterval);
$(".load-more-btn-container > button").click();
/* Thought This Might Work, but didnt
var updatedEl = document.getElementById("cv-dots-container");
var updatedPosition = updatedEl.getBoundingClientRect();
if(updatedPosition !== elemPosition){
$(".load-more-btn-container > button").click();
}*/
}
}, 1000);
}
});
我认为我注释掉的代码块应该完成它,但是没有,因此我在stackoverflow上!哦,是的,值得注意的是cv-dots-container的高度为18px,并且确实具有一个具有margin-top / bottom:20px的父元素,但仅此而已,我不知道它将如何影响我的代码... < / p>