Her yeni kaydırma nasıl kontrol edilir ve Apple fareleri sorununu önlersiniz (çoklu kaydırma efekti)

Question

Bir mousewheel olay betiği oluşturmaya çalışıyorum, ancak Apple Magic Mouse kullanıyorum ve devam etmekte olan kaydırma işlevini kullandığım için bazı sorunlar yaşıyorum .

I (http://brandonaaron.net/code/mousewheel/demos kullanarak, jQuery Tools Scrollable with Mousewheel - scroll ONE position and stop itibaren) bu http://jsfiddle.net/Sg8JQ/ yapmak istiyorum ama kutulara kaydırma VE tek animasyon sırasında birden çok kez kaydırma yaparken düşünce birden kutuları gitmek için yeteneği ne zaman (250ms gibi) kısa bir animasyon istiyorum. (Kaydırırsam, animasyon ikinci kutuya kaydırmaya başlar, ancak tekrar kaydırırsam üçüncü bölüme giderim, iki kez kaydırırsam, ileriye, vb.)

İlk olarak stopPropagation/preventDefault/return false;, fare tekerleği hızını (ve var delta) durdurabilir - böylece yeni kaydırma olaylarının sayısını (belki bir zamanlayıcı ile) sayabilirim - ancak bunların hiçbiri yok.

Fikirler?

DÜZENLEME: Google Takvim’lerinde bu farelerle kaydırmayı denerseniz, yalnızca bir değil, birkaç takvim de değiştirilir. Görünüşe göre bunu da düzeltemezler.

DÜZEN 2: Mousewheel'in açılmasını ve mousewheel dinleyiciyi durdurabildiğini tekrar tekrar bağlamayı düşündüm (ve eylemsizliğin sonunu dinlemeyin). Yapmadım.

DÜZENLEME 3: Tarihleri ​​ile çalışmak çalıştı (this post sayesinde) değil, optimum ama hiç yoktan iyidir http://jsfiddle.net/eZ6KE/ web sitemde ve birçok başarısız girişimden sonra benzer bir sorun vardı

Answer 1

, ben bir işlev yazdı hangi seçilen kutunun toplam ofsetini hesapladı ve animasyonu başladı. Şöyle gözüküyordu:

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

Umarım ne istediğinizi nasıl elde edeceğinize dair bir fikir verir.

Answer 2

Eğer tekerlek hareket durduğunda tespit deneyebilirsiniz, ama senin yanıt süresi

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

kaynağını bir gecikme eklersiniz: Yeni animasyonun başlatılmasını kaçınarak bayrakları jquery mousewheel: detecting when the wheel stops?

veya uygulamak

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

Zaman aşımı hala etkinse, zaman aşımı kullanmak ve dinleyicinin içinde olup olmadığını kontrol etmek en iyi yoldur:

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

herhangi kaydırılabilir elemana ve benim durumumda bu uygulayabilirsiniz, ben jQuery araçları kaydırılabilir kütüphane kullanılan ancak ağır tarayıcının desteği artırmak için özelleştirme yanı sıra benim kullanım alanına özgü özel işlevselliği ekleyerek sona erdi.

Dikkatli olmak istediğiniz bir şey, zaman aşımının, birden fazla olayın sorunsuz şekilde tetiklenmesini önlemek için yeterince uzun olmasını sağlamaktır. Çözümüm, yalnızca öğelerin kaydırma hızını kontrol etmek ve bir kerede kaç kez kaydırılması gerektiğinde etkilidir. Dinleyici işlevinin üst kısmına console.log(event) eklerseniz ve sürekli kaydırma yapan bir çevre birimi kullanarak kaydırma yaparsanız, tetiklenen birçok fare hareketi olayını görürsünüz.

Annoyingly Firefox sihirli fare veya sürekli kaydırma cihazlarda tetiklemez DOMMouseScroll ilerleyin ama bir parşömen var ve fare tekerleğin tıklayarak döngüsü boyunca durdurmak, normal kaydırma cihazları için.