滚动可见性功能触发器

时间:2018-06-27 22:45:17

标签: javascript html css scroll setinterval

所以基本上,我在页面底部有一个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>

0 个答案:

没有答案