jQuery स्क्रॉल इवेंट

Question

मैं निम्नलिखित jQuery कोड का प्रयास कर रहा हूं।
जब मैं या तो ऊपर या नीचे स्क्रॉल करता हूं तो मैं fadeOut एक div और जब स्क्रॉल fadeIn उसी div को रोकता है।

यह क्या मेरे पास है:

$(document).ready(function(){ 
    $(window).scroll(function(e){ 
    $('#search_tab').fadeOut('slow'); 
    }); 
}); 

मुझे पता है कि इस div fadeOut होगा जब स्क्रॉल शुरू कर दिया है, लेकिन चाल इसे वापस फीका करने के लिए एक बार मैं स्क्रॉल रोक है।

अब, मैं इस देखा है (लेकिन अभी भी काफी नहीं जो मैं चाहता)

//Firefox 
$('#elem').bind('DOMMouseScroll', function(e){ 
    if(e.detail > 0) { 
     //scroll down 
     console.log('Down'); 
    }else { 
     //scroll up 
     console.log('Up'); 
    } 

    //prevent page fom scrolling 
    return false; 
}); 

ऊपर समारोह में सभी के रूप में इस काम नहीं करेगा:

$(window).bind('DOMMouseScroll', function(e){ 
    if(e.detail > 0) { 
     //scroll down 
     $('#search_tab').fadeOut('slow'); 
    }else { 
     //scroll up 
     $('#search_tab').fadeOut('slow'); 
    } 

    //prevent page fom scrolling 
    return false; 
}); 

Answer 1

वहाँ एक scrollstop घटना नहीं सुन रहा है, लेकिन आप एक 012 का उपयोग करके एक का अनुकरण कर सकते हैंफ़ंक्शन और फिर पृष्ठ स्क्रॉल होने पर timer साफ़ करने के बाद। यहां एक नमूना fiddle है।

var timer;  
$(window).scroll(function(e){ 
     clearTimeout(timer); 
     $('#search_tab').fadeOut('slow'); 
     timer = setTimeout(checkStop,150); 
}); 

function checkStop(){ 
    $('#search_tab').fadeIn('slow'); 
} 

Answer 2

आप हर फ्रेम पर देख सकते हैं :

// shim for frame listener 
window.requestAnimFrame = (function(){ 
     return window.requestAnimationFrame  || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       window.oRequestAnimationFrame  || 
       window.msRequestAnimationFrame  || 
       function(callback){ 
       window.setTimeout(callback, 1000/60); 
       }; 
    })(); 

    // on every frame, call render() 
    (function animloop(){ 
     requestAnimFrame(animloop); 
     render(); 
    })(); 


var lastScroll = 0, isScrolling = false; 
function render(){ 
    var thisScroll = $(window).scrollTop(); 
    if(lastScroll !== thisScroll){ 
    if(!isScrolling){ 
     // scrolling has started, fade out div 
     $('#search_tab').stop().fadeOut('slow'); 
    } 
    isScrolling = true; 
    }else{ 
    if(isScrolling){ 
     // scrolling has stopped, fade in div 
     $('#search_tab').stop().fadeIn('slow'); 
    } 
    isScrolling = false; 
    } 
    lastScroll = thisScroll; 
}