प्रत्येक नई स्क्रॉल को कैसे जांचें और ऐप्पल मॉल जारी करने से बचें (एकाधिक स्क्रॉल प्रभाव)

Question

मैं एक मूसहेल इवेंट स्क्रिप्ट बनाने का प्रयास करता हूं, लेकिन कुछ मुद्दों को प्राप्त करने के बाद से मैं ऐप्पल मैजिक माउस और इसके जारी-ऑन-स्क्रॉल फ़ंक्शन का उपयोग कर रहा हूं ।

मैं (http://brandonaaron.net/code/mousewheel/demos का उपयोग कर jQuery Tools Scrollable with Mousewheel - scroll ONE position and stop से,) http://jsfiddle.net/Sg8JQ/ ऐसा करना चाहते हैं, लेकिन मैं एक छोटी एनीमेशन चाहते हैं (250ms) की तरह जब बॉक्स तक स्क्रॉल करके, और एक एनीमेशन के दौरान कई बार स्क्रॉल जब सोचा कई बक्से जाने की क्षमता। (यदि मैं स्क्रॉल करता हूं, एनीमेशन दूसरे बॉक्स में स्क्रॉल करना शुरू करता है, लेकिन यदि मैं फिर से स्क्रॉल करता हूं, तो मैं तीसरे स्थान पर जाना चाहता हूं, और यदि मैं दो बार स्क्रॉल करता हूं, तो आगे बढ़ता हूं)

मैंने पहली बार सोचा stopPropagation/preventDefault/return false; mousewheel वेग (और var डेल्टा) को "रोक" सकता है - इसलिए मैं नई स्क्रॉल घटनाओं (शायद टाइमर के साथ) की संख्या गिन सकता हूं - लेकिन उनमें से कोई भी नहीं करता है।

विचार?

संपादित करें: यदि आप इन मकानों के साथ Google कैलेंडर में स्क्रॉल करने का प्रयास करते हैं, तो कई कैलेंडर स्विच किए जाते हैं, न केवल एक। ऐसा लगता है कि वे इसे ठीक नहीं कर सकते हैं।

संपादित करें 2: मैंने सोचा मूसहेल सोचा और मूसहेल श्रोता को रोकने के बाद इसे फिर से बांधना (और जड़ता के अंत को नहीं सुनना)। यह नहीं था।

संपादित करें 3: (this post करने के लिए धन्यवाद) तिथियां साथ बाहर काम करने की कोशिश की, इष्टतम नहीं लेकिन कुछ नहीं से बेहतर http://jsfiddle.net/eZ6KE/

Answer 1

मैं अपनी वेबसाइट पर और कई असफल प्रयासों के बाद एक ऐसी ही समस्या थी, मैं एक समारोह ने लिखा है जो चयनित बॉक्स की कुल ऑफसेट की गणना की और एनीमेशन शुरू किया। ऐसा लगता है:

function getOffset() { 
    var offset = 0; 
    $("#bio-content").children(".active").prevAll().each(function (i) { 
     offset += $(this)[0].scrollHeight; 
    }); 
    offset += $("#bio-content").children(".active")[0].scrollHeight; 

    return offset; 
} 

var offset = getOffset(); 
$('#bio-content').stop().animate({ 
      scrollTop: offset 
}, animationTime); 

मुझे उम्मीद है कि यह आपको एक विचार देता है कि आप क्या चाहते हैं।

Answer 2

आप का पता लगाने जब पहिया घूम रहा है बंद हो जाता है की कोशिश कर सकते हैं, लेकिन यह आपकी प्रतिक्रिया समय के लिए

$(document).mousewheel(function() { 
    clearTimeout($.data(this, 'timer')); 
    $.data(this, 'timer', setTimeout(function() { 
    alert("Haven't scrolled in 250ms!"); 
    //do something 
    }, 250)); 
}); 

स्रोत एक देरी जोड़ना होगा: jquery mousewheel: detecting when the wheel stops?

या एक नया एनीमेशन की शुरुआत से परहेज झंडे को लागू

var isAnimating=false; 

$(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll", function(event, delta) { 
    event.preventDefault(); 
    if (isAnimating) return; 
    navigateTo(destination); 
}); 

function navigateTo(destination){ 
    isAnimating = true; 
    $('html,body').stop().animate({scrollTop: destination},{complete:function(){isAnimating=false;}}); 
} 

Answer 3

टाइमआउट का उपयोग करने के लिए सबसे अच्छा तरीका है और टाइमआउट अभी भी सक्रिय होने पर श्रोता के अंदर जांचें:

var timeout = null; 
var speed = 100; //ms 
var canScroll = true; 

$(element).on('DOMMouseScroll mousewheel wheel', function(event) { 
    // Timeout active? do nothing 
    if (timeout !== null) { 
     event.preventDefault(); 
     return false; 
    } 

    // Get scroll delta, check for the different kind of event indexes regarding delta/scrolls 
    var delta = event.originalEvent.detail ? event.originalEvent.detail * (-120) : (
      event.originalEvent.wheelDelta ? event.originalEvent.wheelDelta : (
        event.originalEvent.deltaY ? (event.originalEvent.deltaY * 1) * (-120) : 0 
    )); 

    // Get direction 
    var scrollDown = delta < 0; 

    // This is where you do something with scrolling and reset the timeout 
    // If the container can be scrolling, be sure to prevent the default mouse action 
    // otherwise the parent container can scroll too 
    if (canScroll) { 
     timeout = setTimeout(function(){timeout = null;}, speed); 
     event.preventDefault(); 
     return false; 
    } 

    // Container couldn't scroll, so let the parent scroll 
    return true; 
}); 

आप किसी भी स्क्रॉल तत्व को और मेरे मामले में यह लागू कर सकते हैं, मैं jQuery उपकरण स्क्रॉल पुस्तकालय थे, लेकिन भारी यह ब्राउज़र समर्थन में सुधार करने के अनुरूपण के साथ-साथ अपने प्रयोग के मामले के लिए विशिष्ट कस्टम कार्यक्षमता में जोड़ने समाप्त हो गया।

एक चीज जिसे आप सावधान रहना चाहते हैं यह सुनिश्चित करना है कि टाइमआउट पर्याप्त घटनाओं को निर्बाध रूप से ट्रिगर करने से रोकने के लिए पर्याप्त लंबा है। मेरा समाधान केवल तभी प्रभावी होता है जब आप तत्वों की स्क्रॉलिंग गति को नियंत्रित करना चाहते हैं और कितने बार एक साथ स्क्रॉल किया जाना चाहिए। यदि आप श्रोता फ़ंक्शन के शीर्ष पर console.log(event) जोड़ते हैं और निरंतर स्क्रॉलिंग परिधीय का उपयोग करके स्क्रॉल करते हैं, तो आप कई मूसहेल ईवेंट ट्रिगर किए जायेंगे।

Annoyingly फ़ायरफ़ॉक्स DOMMouseScroll स्क्रॉल जादू माउस या निरंतर स्क्रॉल उपकरणों पर ट्रिगर नहीं करता है, लेकिन सामान्य स्क्रॉल उपकरणों एक स्क्रॉल है और माउस व्हील का क्लिक चक्र के माध्यम से रोक कि के लिए।