जेएस .scroll() कुशलतापूर्वक

Question

को सुनना मेरे पास कई बच्चों के साथ एक स्क्रॉल करने योग्य तत्व है और संबंधित विकल्पों के साथ एक चयन टैग है।

मैं तत्वों .scrollTop()

यह कुशलतापूर्वक कैसे करना है के आधार पर की चुनिंदा मान बदलने के लिए करना चाहते हैं? मैंने एक सरणी में बच्चों के .offset().top को स्टोर करने और इसके माध्यम से लूपिंग के बारे में सोचा। हालांकि, ब्राउज़र इसे संभाल नहीं करता है। मैं .setTimeout() ध्वज बनाने का प्रयास कर सकता हूं, लेकिन यह साफ नहीं लगता है।

r = $('ul') 
    offsets = [] 
    r.find('li').each((index) -> 
     offsets[index] = $(this).offset().top 
    ) 
    r.bind('scroll', -> 
     // while loop checking .scrollTop() > offsets[n] is slow 
     // maybe spams to many .scroll events? 
    ) 

Answer 1

कैसे @osoner ने कहा कि स्क्रॉल में सभी गणना करने के बजाय भी हैंडलर, आप एक अंतराल (उदाहरण के लिए, 'fooscroll') के बाद हैंडलर में एक और घटना को आग लगाना, और फिर आपके बच्चे के सभी तत्व सदस्यता लेते हैं घटना, और सेट की गई स्थितियों के आधार पर खुद को अपडेट करें।

var scrollTimer; 
$(window).on('scroll', function(e) { 
    if (scrollTimer) { clearTimeout(scrollTimer); } 
    scrollTimer = setTimeout(function() { 
     $(window).trigger('fooscroll'); 
    }, 200); 
}); 

$('li').on('fooscroll', function() { 
    // Check scrollTop or whatever... 
}); 

Answer 2

आपको this suggestion from John Resig पढ़ना चाहिए। मूल रूप से जब भी उपयोगकर्ता स्क्रॉल करता है और उस अंतराल फ़ंक्शन के साथ इच्छित कार्रवाई करता है जो इस ध्वज को जांचता है।