在某个滚动偏移或滚动时间之后的火焰滚动事件

Question

我正在使用fullPage.jsJQuery插件(请参阅此处的演示).此插件定义完整窗口大小的部分,并在用户向上或向下滚动时从"滑动"部分滚动到"滑动".

我正在尝试修改它,以便滚动事件不会在滚动开始时立即触发但在短时间或某个滚动量之后,以防止用户意外滑动几个像素,这将触发滚动事件并滚动到下一张幻灯片

例如,如果用户滚动偏移<100px,则滚动回当前幻灯片,如果偏移> 100px,则滚动到下一张幻灯片.

这是fullpage.js代码.我想我必须修改这个功能才能得到我想要的东西:

//when scrolling...
$(window).scroll(function(e){
        if(!options.autoScrolling){
                var currentScroll = $(window).scrollTop();

                var scrolledSections = $('.section').map(function(){
                        if ($(this).offset().top < (currentScroll + 100)){
                                return $(this);
                        }
                });

                //geting the last one, the current one on the screen
                var currentSection = scrolledSections[scrolledSections.length-1];

                //executing only once the first time we reach the section
                if(!currentSection.hasClass('active')){
                        var yMovement = getYmovement(currentSection);

                        $('.section.active').removeClass('active');
                        currentSection.addClass('active');

                        var anchorLink  = currentSection.data('anchor');
                        $.isFunction( options.onLeave ) && options.onLeave.call( this, currentSection.index('.section'), yMovement);

                        $.isFunction( options.afterLoad ) && options.afterLoad.call( this, anchorLink, (currentSection.index('.section') + 1));

                        activateMenuElement(anchorLink);        
                }
        }                                        
});

但我真的不知道该怎么做...我想我应该在滚动开始和滚动结束时获得滚动偏移/时间,得到差异然后根据差异滚动到当前或下一张幻灯片,但我不知道我不知道如何在这个函数中实现它以及如何获得滚动结束事件.

而且我不确定使用"滚动结束事件",因为如果用户想要向下或向上滚动,则脚本不必等待用户停止滚动以滚动它所必需的位置.

也许我应该在滚动期间获得滚动偏移,当偏移> x时滚动到下一个并且如果滚动停止并且偏移<x,则滚动回当前？或者我可以使用滚动时间而不是滚动偏移？

Answer 1

我猜你在使用笔记本电脑和它们的触控板时遇到了麻烦,而不是使用鼠标滚轮.我对么？或者,使用Apple鼠标,就滚动而言就像一个触控板.

好吧,只是为了让你知道,问题不在于$(window).scroll(function(e){功能,而在于MouseWheelHandler().该.scroll功能仅在选项autoScrolling设置false为第一个条件时才能使用.

这样说,MouseWheelHandler()每次检测到鼠标滚轮或触控板上的任何滚动时,都会触发该功能.避免在第一个滚动条上触发它的方法就是为它创建一个计数器.

您必须要小心,因为滚动在触控板中比在普通鼠标轮中更敏感,因此,在定义要使用的最小滚动数之前,请尝试使用两个设备.

我已经定义了一个设置为0的新变量:

var scrolls = 0;

然后,在里面MouseWheelHandler(),我添加了一个新的条件scrolls > 2.

if(options.autoScrolling && scrolls>2){

这样,如果我们滚动超过3次,我们将只触发事件,我认为这对于鼠标滚轮来说已经足够了.

如果我们不输入条件,那么我们增加变量:

}else{
    scrolls++;    
};

这是工作演示:http://jsfiddle.net/prYUq/2/

这里有完整的修改功能:

var scrolls = 0;

 function MouseWheelHandler() {
     return function (e) {
         if (options.autoScrolling && scrolls > 2) {
             // cross-browser wheel delta
             e = window.event || e;
             var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
             e.wheelData

             console.log("e.wheelDelta: " + e.wheelDelta);
             console.log("-e.detail: " + e.detail);

             if (!isMoving) { //if theres any #
                 var scrollable = $('.section.active').find('.scrollable');

                 //scrolling down?
                 if (delta < 0) {
                     if (scrollable.length > 0) {
                         //is the scrollbar at the end of the scroll?
                         if (isScrolled('bottom', scrollable)) {
                             $.fn.fullpage.moveSlideDown();
                         } else {
                             return true; //normal scroll
                         }
                     } else {
                         $.fn.fullpage.moveSlideDown();
                     }
                 }

                 //scrolling up?
                 else {
                     if (scrollable.length > 0) {
                         //is the scrollbar at the start of the scroll?
                         if (isScrolled('top', scrollable)) {
                             $.fn.fullpage.moveSlideUp();
                         } else {
                             return true; //normal scroll
                         }
                     } else {
                         $.fn.fullpage.moveSlideUp();
                     }
                 }
             }
             scrolls = 0;

             return false;
         } else {
             scrolls++;
         };
     }
 }

如果您对插件有特定问题或要求,请不要忘记github上关于此插件的问题论坛:https://github.com/alvarotrigo/fullPage.js/issues？ state = open

我希望它有所帮助.