在一定的滚动偏移或滚动时间之后触发滚动事件

Fire scroll event after a certain scroll offset or scrolling time

本文关键字：滚动 之后 时间 事件      更新时间：2023-09-26

我正在使用fullPage.js JQuery插件（请参阅此处的演示）。该插件定义了完整的窗口大小部分，并在用户向上或向下滚动时从"幻灯片"部分滚动到"幻灯片"。

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

例如，如果用户按偏移量<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 <，则滚动回当前？或者我可以使用滚动时间而不是滚动偏移量？

我想你在笔记本电脑及其触控板而不是鼠标滚轮上遇到了麻烦。我说的对吗？或者，也许使用Apple鼠标，在滚动方面就像一个触控板。

好吧，只是想让您知道，问题不在于$(window).scroll(function(e){功能，而在于 MouseWheelHandler() .仅当选项autoScrolling设置为false时，才使用 .scroll 函数，如您在第一个条件中看到的那样。

话虽如此，每次检测到鼠标滚轮或触控板上的任何滚动时，都会触发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

我希望它有所帮助。

相关文章：