I am executing Javascript onScroll. My code works great with any normal puter mouse, but when I use my notebook's touchpad, I encounter the following situation:

• my mouse fires (about 1 to 8) mousewheel events while the finger is moving the wheel.
• my touchpad fires a lot more (~60) mousewheel events while the two fingers are touching the pad and continues to fire after my fingers are up in the air again.

I know this behavior from mobile touch devices. The Feature is called "Predictive Touch" - The Scrolling continues if your finger movement had enough acceleration before lifting it up.

I think the touchpad drivers are setting this "smooth scrolling" behavior.

To debug this case, I have used the following code:

/* Handle Mouse-Wheel Scrolling */
var lastChange = +new Date();
$(window).bind('mousewheel',    function(e){
    console.log("mw");
    if(+new Date() - lastChange > 1000){
        console.log("mw allowed");
        if(e.originalEvent.wheelDelta > 0)  {/*go to previous*/}
        else{   /*go to next*/}
        lastChange = +new Date();
    }
return false;});

This is a simple code that "allows" a mouse-scrolling-event every second.

If I make a fast touchpad-scroll, the mousewheel event is fired ~300 times. The one-second-condition is letting 3 events happen. My fingers were on the touchpad for far less than a second.

With this test, I discovered that the mousewheel events are still fired (almost continuously for 3 seconds), even when my fingers are already off the touchpad.

Is there a Javascript function or a workaround / trick / hack to avoid this behavior?

Something like a onTouchEnd event for touchpads, maybe?

I am executing Javascript onScroll. My code works great with any normal puter mouse, but when I use my notebook's touchpad, I encounter the following situation:

• my mouse fires (about 1 to 8) mousewheel events while the finger is moving the wheel.
• my touchpad fires a lot more (~60) mousewheel events while the two fingers are touching the pad and continues to fire after my fingers are up in the air again.

I know this behavior from mobile touch devices. The Feature is called "Predictive Touch" - The Scrolling continues if your finger movement had enough acceleration before lifting it up.

I think the touchpad drivers are setting this "smooth scrolling" behavior.

To debug this case, I have used the following code:

/* Handle Mouse-Wheel Scrolling */
var lastChange = +new Date();
$(window).bind('mousewheel',    function(e){
    console.log("mw");
    if(+new Date() - lastChange > 1000){
        console.log("mw allowed");
        if(e.originalEvent.wheelDelta > 0)  {/*go to previous*/}
        else{   /*go to next*/}
        lastChange = +new Date();
    }
return false;});

This is a simple code that "allows" a mouse-scrolling-event every second.

If I make a fast touchpad-scroll, the mousewheel event is fired ~300 times. The one-second-condition is letting 3 events happen. My fingers were on the touchpad for far less than a second.

With this test, I discovered that the mousewheel events are still fired (almost continuously for 3 seconds), even when my fingers are already off the touchpad.

Is there a Javascript function or a workaround / trick / hack to avoid this behavior?

Something like a onTouchEnd event for touchpads, maybe?

• javascript
• jquery
• touch
• jquery-events
• mousewheel

2 Answers 2

To achieve this, you'd have to distinguish between mouse scroll events and touchpad events, which is not (yet) possible using JavaScript. It was already asked in question How to capture touch pad input.

Pointer Events are currently in state of Editor's Draft and not yet supported by any browser. See also touch events docs on MDN.

EDIT: This doesn't appear to work for trackpads. Once they are widely supported, this could be implemented using Touch Events, specifically the Touch End event. By tracking when the finger leaves the trackpad, you can prevent the page scrolling at that particular point.

https://jsfiddle/gLkkb5z0/3/

(function(){

    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.scrollstart = {
        setup: function() {

            var timer,
                handler =  function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = 'scrollstart';
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.scrollstop.latency);

                };

            jQuery(this).bind('scroll', handler).data(uid1, handler);

        },
        teardown: function(){
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
        }
    };

    special.scrollstop = {
        latency: 300,
        setup: function() {

            var timer,
                    handler = function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    }

                    timer = setTimeout( function(){

                        timer = null;
                        evt.type = 'scrollstop';
                        jQuery.event.handle.apply(_self, _args);

                    }, special.scrollstop.latency);

                };

            jQuery(this).bind('scroll', handler).data(uid2, handler);

        },
        teardown: function() {
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
        }
    };

})();

Demo

Taken from http://james.padolsey./javascript/special-scroll-events-for-jquery/