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

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), {&nbsp; &nbsp; capture: true,&nbsp; &nbsp; passive: true});var $animation_elements = $('.zoom-images');var $window = $(window);function check_if_in_view() {&nbsp; &nbsp; var window_height = $window.height();&nbsp; &nbsp; var window_top_position = $window.scrollTop();&nbsp; &nbsp; var window_bottom_position = (window_top_position + window_height);&nbsp; &nbsp; $.each($animation_elements, function() {&nbsp; &nbsp; &nbsp; &nbsp; var $element = $(this);&nbsp; &nbsp; &nbsp; &nbsp; var $zoom = $(this).children('img.zoom');&nbsp; &nbsp; &nbsp; &nbsp; var element_height = $element.outerHeight();&nbsp; &nbsp; &nbsp; &nbsp; var element_top_position = $element.offset().top;&nbsp; &nbsp; &nbsp; &nbsp; var element_bottom_position = (element_top_position + element_height);&nbsp; &nbsp; &nbsp; &nbsp; if ((element_bottom_position >= window_top_position) &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (element_top_position <= window_bottom_position)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; requestAnimationFrame( function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $zoom.addClass('is-zooming');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; requestAnimationFrame( function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $zoom.removeClass('is-zooming');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });};

Answer 2

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