Question

我正在尝试使用一些滚动事件，并为我页面的顶级部分创建“捕捉”效果。我成功地捕获了所有内容并设置了动画滚动位置并且实际上一切正常工作，但是，当我测试滚动事件时，每当我的条件满足时它就会触发，因此我的滚动函数被调用了太多次。我想知道如果我的条件得到满足（鼠标滚轮移动/旋转了一定量），如何最好地解除滚动事件的绑定。我正在$ window.on函数之后检查带有'direction'var的卷滚动。任何帮助重构这个或建议如何更好地解决它是值得赞赏的。

为了记录，我正在使用jquery，greensock和一个名为scrollTo的绿色插件。

$(function(){

var $window = $(window);        //Window object

var scrollTime = 1;             //Scroll time
var scrollDistance = 250;       //Distance. Use smaller value for shorter scroll and greater value for longer scroll

$window.on("mousewheel DOMMouseScroll", function(event){

    event.preventDefault();

    var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
    var direction = delta > .875 ? 'up' : delta < -.875 ? 'down' : 'stick';

    if ( direction == 'up' ) {
        // going up...
        var next = $('.section.visible').prev('.section');
        scroll(next);
    }
    else if ( direction == 'down' ) {
        // going down to china town...
        var next = $('.section.visible').next('.section');
        scroll(next);
    }

    function scroll(next) {
        // scroll the doc
        var scroll = next.position().top;

        TweenMax.to($window, scrollTime, {
            scrollTo : { y: scroll, autoKill:true },
                ease: Power3.easeOut,
                autoKill: true,
                overwrite: 5                            
            });

        // clean up classes
        $('.section.visible').removeClass('visible');
        next.addClass('visible');
    }

});
});

Answer 1

答案似乎在贬值。我读过关于节流与去抖的内容，似乎并不认为其中任何一个都是答案。感谢Arun P Johny让我开始使用似乎是一种限制方法。它最终让我得到了正确的答案。

Answer 2

在这种情况下，测试解决方案之一是使用setTimeout()，在下列情况下，如果两个事件在200毫秒内发生，则第一个事件被取消

$(function(){

    var $window = $(window);        //Window object

    var scrollTime = 1;             //Scroll time
    var scrollDistance = 250;       //Distance. Use smaller value for shorter scroll and greater value for longer scroll

    $window.on("mousewheel DOMMouseScroll", function(event){
        var $this = $(this);

        event.preventDefault();

        clearTimeout($this.data('scrolltimer'));

        var timer = setTimeout($.proxy(function(){
            var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
            var direction = delta > .875 ? 'up' : delta < -.875 ? 'down' : 'stick';

            if ( direction == 'up' ) {
                // going up...
                var next = $('.section.visible').prev('.section');
                scroll(next);
            }
            else if ( direction == 'down' ) {
                // going down to china town...
                var next = $('.section.visible').next('.section');
                scroll(next);
            }

            function scroll(next) {
                // scroll the doc
                var scroll = next.position().top;

                TweenMax.to($window, scrollTime, {
                    scrollTo : { y: scroll, autoKill:true },
                    ease: Power3.easeOut,
                    autoKill: true,
                    overwrite: 5                            
                });

                // clean up classes
                $('.section.visible').removeClass('visible');
                next.addClass('visible');
            }
        }, this), 200);
        $this.data('scrolltimer', timer)

    });
});

一次捕捉滚动事件

2 个答案: