Disable Predictive Scrolling - Mousewheel (OnScroll) Event fires too often (Touchpad)

前端 未结 2 857
醉酒成梦
醉酒成梦 2021-02-09 02:38

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

2条回答
  •  春和景丽
    2021-02-09 02:53

    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.net/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.com/javascript/special-scroll-events-for-jquery/

提交回复
热议问题