Fire scroll event after a certain scroll offset or scrolling time

Question

I am using fullPage.js JQuery plugin (see demo here). This plugin defines full window sized section and scrolls from section "slide" to "slide" when the user scroll up or down.

I am trying to modify it so that the scroll event doesn't fire immediately when scroll begin but after a short time or a certain scroll amount, to prevent the user accidentally sliding for a few pixels, which will fire the scroll event and scroll to next slide.

For example, if the user scroll by offset < 100px then scroll back to the current slide, and if offset > 100px then scroll to next slide.

Here is the fullpage.js code. I think that I will have to modify this function to get what I want :

//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);        
                }
        }                                        
});

But I don't really know how to do that... I think I should maybe get scroll offset/time on scroll begin and scroll end, get the difference and then scroll to current or next slide depending of the difference, but I don't know how to implement this in this function and how to get the scroll end event.

And I'm not sure about using "scroll end event" because if the user wants to scroll down or up, the script shouldn't have to wait for the user stops scrolling to scroll where it has to..

Maybe I should get scroll offset during scrolling, scroll to next when offset > x and scroll back to current if scroll stops and offset < x ? Or I could use scroll time instead of scroll offset ?

Answer 1

I guess you are having that trouble with laptops and their trackpads rather than with the mouse wheel. Am I correct? Or maybe, with the Apple mouse, which is like a trackpad in terms of scrolling.

Well, just to let you know, the problem is not in the $(window).scroll(function(e){ function, but in the MouseWheelHandler(). The .scroll function is only used when the option autoScrolling is set to false as you can see in the first condition.

Said this, the MouseWheelHandler() function is fired every time it detects any scroll on the mousewheel or in the trackpad. A way to avoid firing it on the first scroll is just creating a counter for it.

You have to be careful, as the scrolling is much more sensitive in trackpads than in normal mousewheels, so, try it with both devices before defining the minimum number of scrolls that you want to use.

I've defined a new variable set to 0:

var scrolls = 0;

Then, inside MouseWheelHandler(), I've added a new condition scrolls > 2.

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

This way, we will only fire the events if we scroll more than 3 times, which i believe is enough for mouse wheels.

If we don't enter in the condition, then we increment the variable:

}else{
    scrolls++;    
};

Here's the working demo: http://jsfiddle.net/prYUq/2/

And here the full modified function:

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++;
         };
     }
 }

If you have specific questions or request for the plugin, don't forget about the issues forum on github for this plugin: https://github.com/alvarotrigo/fullPage.js/issues?state=open

I Hope it helps.