当 div 仅在视口中时启用滚动事件，然后在视口外时重置

Question

我试图在元素每次进入 Amplitude 视口时对其进行跟踪。现在，当一个元素滚动到视图中时，jQuery 会检测元素 id，如果它向上或向下滚动，并声明它是一个滚动事件。这些项目显示在 Amplitude admin 中。问题是当 div 在视口中时，每次鼠标滚动都会触发滚动事件。因此，当视口中的每个元素只需要一个事件时，它会创建大量事件。如何只触发一次事件，然后在它再次超出视口时将其重置？

     function isScrolledIntoView(elem) {

            // set offset by 10%
            var offSet = jQuery(window).height()*0.1;
            // offset scrolltop
            var docViewTop = jQuery(window).scrollTop() + offSet;
            // set window height area to 80% 
            var windowSize = jQuery(window).height()*0.8;

            var docViewBottom = docViewTop + windowSize;

            var elemTop = jQuery(elem).offset().top;

            var elemBottom = elemTop + jQuery(elem).height();


            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));


        }
        var lastScrollTop = 0;
        jQuery(window).scroll(function (event) {

                // detects scroll direction.
                var st = jQuery(this).scrollTop();
                   if (st > lastScrollTop){
                     var action = 'ScrollDown';
                   } else {
                      var action = 'ScrollUp';
                   }
                   lastScrollTop = st;



                jQuery('.trackScrolling').each(function () {

                    // get element ID
                   var elementID = jQuery(this).attr("id");

                    var ScrollEvents = 'ScrollEvents';  

                  // if in viewport fire event
                    if (isScrolledIntoView(this) === true) {


                      gu_event(ScrollEvents, action, elementID);


                    } 


                });

        });

Answer 1

您需要为每个元素创建一个布尔标志以检查它是否已经在视口中并添加另一个if 条件检查，如下所示：

var elements = [];
var lastScrollTop = 0;

jQuery('.trackScrolling').each(function () {
    elements.push({
        "elem": this,
        "id": jQuery(this).attr("id")),
        "inView": false
    });
});

function isScrolledIntoView(elem) {
    // set offset by 10%
    var offSet = jQuery(window).height()*0.1;

    // offset scrolltop
    var docViewTop = jQuery(window).scrollTop() + offSet;

    // set window height area to 80% 
    var windowSize = jQuery(window).height()*0.8;

    var docViewBottom = docViewTop + windowSize;
    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

jQuery(window).scroll(function (event) {
    var action;

    // detects scroll direction.
    var st = jQuery(this).scrollTop();

    if (st > lastScrollTop){
       action = 'ScrollDown';
    } else {
       action = 'ScrollUp';
    }

    lastScrollTop = st;

    for (var i = 0; i < elements.length; i++) {
        var ScrollEvents = 'ScrollEvents';

        if (elements[i].inView === true && isScrolledIntoView(elements[i].elem) === true) {

            // do nothing in this case...
            console.log('Element ' + elements[i].id + ' is already in view!');

        } else if (isScrolledIntoView(elements[i].elem) === true) {

            // set the flag in this case and send the event
            elements[i].inView = true;
            gu_event(ScrollEvents, action, elements[i].id);

        } else if (isScrolledIntoView(elements[i].elem) === false) {

            // reset the flag in this case
            elements[i].inView = false;
        }
    }
});

与您的 scroll 函数不断查找所有 .trackScrolling 元素不同，我预先存储了对它们的引用 - 每个的 ID 以及它是否在视口中都存储在一个对象中。