How can I determine the direction of a jQuery scroll event?

后端 未结 25 1446
爱一瞬间的悲伤
爱一瞬间的悲伤 2020-11-21 22:24

I\'m looking for something to this effect:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscrol         


        
相关标签:
25条回答
  • 2020-11-21 23:10

    This is an optimal solution for detecting the direction just when the user end scrolling.

    var currentScrollTop = 0 ;
    
    $(window).bind('scroll', function () {     
    
        scrollTop = $(this).scrollTop();
    
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
    
            if(scrollTop > currentScrollTop){
                // downscroll code
                $('.mfb-component--bl').addClass('mfbHide');
            }else{
                // upscroll code
                $('.mfb-component--bl').removeClass('mfbHide');
            }
            currentScrollTop = scrollTop;
    
        }, 250));
    
    });
    
    0 讨论(0)
  • 2020-11-21 23:11

    Why nobody use the event object returned by jQuery on scroll ?

    $window.on('scroll', function (event) {
        console.group('Scroll');
        console.info('Scroll event:', event);
        console.info('Position:', this.pageYOffset);
        console.info('Direction:', event.originalEvent.dir); // Here is the direction
        console.groupEnd();
    });
    

    I'm using chromium and I didn't checked on other browsers if they have the dir property.

    0 讨论(0)
  • 2020-11-21 23:11

    This is simple and easy detection for when the user scrolls away from the top of the page and for when they return to the top.

    $(window).scroll(function() {
        if($(window).scrollTop() > 0) {
            // User has scrolled
        } else {
            // User at top of page
        }
    });
    
    0 讨论(0)
  • 2020-11-21 23:13
    var tempScrollTop, currentScrollTop = 0; 
    
    $(window).scroll(function(){ 
    
       currentScrollTop = $("#div").scrollTop(); 
    
       if (tempScrollTop > currentScrollTop ) {
           // upscroll code
       }
      else if (tempScrollTop < currentScrollTop ){
          // downscroll code
      }
    
      tempScrollTop = currentScrollTop; 
    } 
    

    or use the mousewheel extension, see here.

    0 讨论(0)
  • 2020-11-21 23:13

    You can determin mousewhell direction.

    $(window).on('mousewheel DOMMouseScroll', function (e) {
        var delta = e.originalEvent.wheelDelta ? 
                       e.originalEvent.wheelDelta : -e.originalEvent.detail;
    
        if (delta >= 0) {
            console.log('scroll up');
        } else {
            console.log('scroll down');
        }
    });
    
    0 讨论(0)
  • 2020-11-21 23:13

    This works in all pc or phones browsers, expanding on the top answers. One can build a more complex event object window["scroll_evt"] then call it in the handleScroll() function. This one triggers for 2 concurrent conditions, if certain delay has elapsed or certain delta is passed to eliminate some unwanted triggers.

    window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
    $(window).scroll(function() {
    
        var currentScroll = $(this).scrollTop();
        var currentTime = Date.now();
        var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
        boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
        if(boolRun){
            window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
            window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
            window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
            window["scroll_evt"]["pos"] = currentScroll;
            window["scroll_evt"]["time"] = currentTime;
            handleScroll();
        }
    });
    
    
    function handleScroll(){
        event.stopPropagation();
        //alert(window["scroll_evt"]["direction"]);
        console.log(window["scroll_evt"]);
    }
    
    0 讨论(0)
提交回复
热议问题