Üst öğe kaydırma önlemek?

SORU

27 NİSAN 2011, ÇARŞAMBA

Üst öğe kaydırma önlemek?

Biraz "kayan Araç Kutusu" - position:fixed; overflow:auto.bir div var İşleri iyi gidiyor.

Ama o kutu (fare tekerleği ile) içinde kaydırma ve alt VEYA üst, üst öğe ulaşırken "devraldı" "istek" : alet kutusu, kayar arkasında belge. kaydırma
Ne kullanıcı ve can sıkıcı değil - "" istedi.

JQuery kullanıyorum ve bu olay ile davranışları durdurabileceğimi düşündüm.() stoppropagation:
$("#toolBox").scroll( function(event){ event.stoppropagation() });

İşlevi girin, ama yine de, yine de yayma (belge verilirse) olur
- Şaşırtıcı derecede zor o YÜZDEN bu konu için Arama (Google), o yüzden sormalıyım:
Nasıl yayılma / kaydırma-olay köpüren önlemek için ?

Düzenleme:
Amustill için çalışan çözüm sayesinde (ve fare tekeri-eklenti burada Aaron Brandon:
https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js

$(".ToolPage").bind('mousewheel', function(e, d)  
    var t = $(this);
    if (d > 0 && t.scrollTop() === 0) {
        e.preventDefault();
    }
    else {
        if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
            e.preventDefault();
        }
    }
});

CEVAP

1 Mayıs 2013, ÇARŞAMBA

Çünkü bütünlüğü için bu cevabı ekliyorum@tarafından kabul edilen cevap amustill doğru Internet Explorer sorunu çözmüyor. Yorum ayrıntılar için my original post bakın lütfen. Buna ek olarak, bu çözüm, herhangi bir eklenti - sadece bir WordPress kullanmak gerektirmez.

Özünde, kod mousewheel olay işleme ile çalışır. Her böyle olay wheelDelta a kaydırılan alanında hareket edecek olan px sayısına eşit içerir. Eğer bu değer ** 8, daha sonra ise up kaydırma. wheelDelta <0 down kaydırma.

FireFox: FireFox DOMMouseScroll olay olarak kullanır, ve doldurur yukarıda açıklanan nedir ters olan originalEvent.detail,. Genellikle diğer tarayıcılar 120 (en azından benim makinada) aralıklarla kaydırma iade ederken 3 aralıkları verir. Doğru, biz sadece bunu algılar ve -40 normalize etmek ile çarpın.

@amustill's answer <div>'In sekmeli alan zaten üst veya alt maksimum pozisyon. eğer olay iptal ederek çalışır AncakInternet Explorerardı delta kalan kaydırılan alandan daha büyük olduğu durumlarda iptal olayı.

Diğer bir deyişle, Eğer bir 200px uzun boylu <div> içeren 500px sekmeli içerik ve güncel scrollTop 400 mousewheel olay anlatır tarayıcı kaydırma 120px daha fazla olur sonuçta her ikisi de <div> <body> kaydırma, çünkü 400 120 >500.

Sorunu çözmek için, bir şey, aşağıda gösterildiği gibi biraz farklı yapmak zorundayız:

jQuery gerekli kod:

$(document).on('DOMMouseScroll mousewheel', '.Scrollable', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

Özünde, bu kodu iptal eder herhangi bir kaydırma olayı hangisi oluşturmak istenmeyen kenar durumu, kullanır, sonra bir WordPress kullanmak için set scrollTop <div> ya maksimum ya da minimum değeri, bağlı olarak hangi yönde mousewheel olaydı istiyorum.

Olay tamamen her iki durumda da iptal edildi çünkü, hiç body hiç yayar, ve bu nedenle IE gibi diğer tarayıcılar tüm sorunu çözer.

Ayrıca working example on jsFiddle koyduk.

Bunu Paylaş: