如何将多个滚动事件侦听器合并为一个？

Question

我有以下功能，可以在图像进入视口后缩小图像。现在，它附加的事件侦听器与元素一样多。出于性能原因，我想将它们组合成一个所有元素的事件侦听器，但我不知道如何操作。这是我的代码：断续器<div class="image-wrapper">     <div class="image-container elem-1">        <div class="zoom-images">            <img class="zoom" src="test" alt="test">        </div>    </div>    <div class="image-container elem-2">        <div class="zoom-images">            <img class="zoom" src="test" alt="test">        </div>    </div>    <div class="image-container elem-3">        <div class="zoom-images">            <img class="zoom" src="test" alt="test">        </div>    </div></div>JAVASCRIPT$('.zoom').each(function() {    var el = $(this);    var inViewport = false;    var isZooming = false;    originY = 0;    window.addEventListener('scroll', throttle(zoomImage, 250), {passive: true});    function zoomImage() {        originY = $(window).scrollTop();        if (el.isInViewport()) {            if (!inViewport) {                inViewport = true;             }        } else {            if (inViewport) {                inViewport = false;            }        }           if (inViewport) {            if (!isZooming) {                window.requestAnimationFrame(function () {                    el.addClass('is-zooming');                });                isZooming = true;            }        } else {            if (isZooming) {                window.requestAnimationFrame(function () {                    el.removeClass('is-zooming');                });                isZooming = false;            }        }    };    $.fn.isInViewport = function() {        var elementTop = $(this).offset().top;        var elementBottom = elementTop + $(this).outerHeight();        var viewportTop = $(window).scrollTop();        var viewportBottom = viewportTop + $(window).height();        return elementBottom > viewportTop && elementTop < viewportBottom;    };});任何帮助将不胜感激！多谢！

Answer 1

我找到了解决方案。对于任何感兴趣的人，我是这样解决的：

window.addEventListener('scroll', throttle(check_if_in_view, 220), {

    capture: true,

    passive: true

});

var $animation_elements = $('.zoom-images');

var $window = $(window);

function check_if_in_view() {

    var window_height = $window.height();

    var window_top_position = $window.scrollTop();

    var window_bottom_position = (window_top_position + window_height);

    $.each($animation_elements, function() {

        var $element = $(this);

        var $zoom = $(this).children('img.zoom');

        var element_height = $element.outerHeight();

        var element_top_position = $element.offset().top;

        var element_bottom_position = (element_top_position + element_height);

        if ((element_bottom_position >= window_top_position) &&

            (element_top_position <= window_bottom_position)) {

            requestAnimationFrame( function() {

                $zoom.addClass('is-zooming');

            });

        } else {

            requestAnimationFrame( function() {

                $zoom.removeClass('is-zooming');

            });

        }

    });

};

Answer 2

将侦听器附加到感兴趣事物的容器中，事件将“冒泡”到它们身上。（事件调用将告诉您哪个对象是目标。