How does js listen for the scroll bar to start scrolling and the scroll bar to end scrolling, respectively, to output something?

how does js listen for the scroll bar to start scrolling and the scroll bar to end scrolling, respectively, and output one thing respectively? Wait online.

Html5
Mar.07,2021

js itself cannot tell whether the scroll bar is scrolling or stopping, so you need to listen to whether the distance from the scroll bar to the top no longer changes to indicate that it has stopped; otherwise, it is scrolling.

Reference Jq version: https://www.jianshu.com/p/4fa.

/ this js file extends the scroll () method. In JQ, scroll () can only listen for one event while scrolling. This js file can listen to scrollStart and scrollStop / 

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

you can save the above code to a file, which is equivalent to a plug-in. 

(function(){
    jQuery(window).bind('scrollstart', function(){
        console.log("start");
    });
 
    jQuery(window).bind('scrollstop', function(e){
        console.log("end");
    });
 
})();

reproduced on
author:
link: https://www.jianshu.com/p/4fa.
source: brief book
copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

Previous: On the problem of getting the height of Scroll Bar with pull-up load in mui

Next: How to automatically add the generated vendor.js file to each HTML after using the DLLPlugin method with WEBPACK

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu