HTML5 tuval öğelerindeki sınır kaydırma becerisi

Question

Tuval üzerine çizilmiş bir dizi dikdörtgen var ve kutuları yukarı ve aşağı hareket ettirmek için bir kaydırma olay dinleyicisi kullanıyorum.

Bazı onaylamaları eklemeye çalışıyorum, bu sayede kutular belirli bir noktadan sonra kaydırılamaz.

Hızlanma nedeniyle, kaydırma değerleri her zaman 1 artar, bu yüzden hızlıca kaydırırken bazen doğrulama işlemi çok erken başlar.

Bunu nasıl çözeceğiniz konusunda herhangi bir fikrin var mı? bu sizin için çalışıyorsa

lScroll += e.deltaY; 

if (lScroll > 0) { 
    canScroll = false; 
    lScroll = 0; 
} else { 
    canScroll = true; 
} 

https://jsfiddle.net/kr85k3us/3/

Answer 1

kontrol edin:

Yani benim olay dinleyicisi de ben test ettim https://jsfiddle.net/kr85k3us/4/

ve belki çalışacaktır ama Musluğunuzu daha hızlı hareket ettirebilirsiniz :)

if (!canScroll && lScroll == 0) { 
    var first = Object.keys(boxes)[0]; 

    if (boxes[first]['y'] < 10) { 
     var delta = 10 - boxes[first]['y']; 
     Object.keys(boxes).forEach(function(k){ boxes[k]['y'] += delta; }); 
    } 
} 

Bu, eklediğim kodun bir parçasıdır. Kaydıramıyorsanız ve lScroll 0 ise, bu en üst seviyeye ulaştığımız anlamına gelir. Sonra, ilk kutunun olması gereken yerde olup olmadığını kontrol ediyorum. Değilse (yani boxes[first]['y'] < 10) tüm kutuları 'y konumunu ayarlar.