JQuery/JS: Kullanıcının kaydırma girişimini herhangi bir pencere taşması olmadan algılamak için

Question

'a geçiş yapın Geçiş yapan bir web sitesinde çalışıyorum ve kullanıcının kaydırma girişimini geçiş başlatıcı olarak kullanmak isterken, orada olmak istemiyorum. bir pencere kaydırma çubuğu. Şu anda

, ben sadece kullanıcı verilirse o tespit ediyorum (benim pencere boyutunu yaptık 1px uzun boylu bir kaydırma için kullanıcının ekran, bu şimdiye kaçınmaya çalışıyorum budur rağmen) jQuery en

ile

.scroll(function) 

yöntemi ve sayfamı geçiş için kullanıyor, ancak ben bir piksel sayfam taşması yapmak zorunda ve böylece kaydırma çubuğu göstermeden kullanıcının kaydırma girişimi tespit etmek istiyorum

Nasıl bu yapıldı?

Konumlandırma bir dış mahfaza içine pencere ve sargının taşma kaydırma çubuğu gizleme: Bildiğim

Dağınık yama imkanı. Bu bir yama işi ve bir çözüm değil. Tüm tarayıcıların kaydırma çubukları için aynı genişlikte kullanılmadığından sayfa içeriğinin sayfa dışı olmasına neden olur.

Answer 1

Bu question'a bir bakın. Bunu fiddle yapmak için referans olarak kullandım.

Works only in Firefox

:

$('html').on ('DOMMouseScroll', function (e) { 
    var delta = e.originalEvent.detail; 

    if (delta < 0) { 
     $('p').text ('You scrolled up'); 
    } else if (delta > 0) { 
     $('p').text ('You scrolled down'); 
    } 

}); 

Works in Chrome, IE, Opera and Safari:

$('html').on ('mousewheel', function (e) { 
    var delta = e.originalEvent.wheelDelta; 

    if (delta < 0) { 
     $('p').text ('You scrolled down'); 
    } else if (delta > 0) { 
     $('p').text ('You scrolled up'); 
    } 
}); 

Sen tüm tarayıcı ekranı kapsayan bir eleman üzerinde bağlamak gerekir.

Answer 2

TreeTree'nin yanıtı, tüm tarayıcıları destekleyen tek bir işlevde basitleştirilebilir. Mousewheel ve DOMMouseScroll olaylarını jQuery supports one or more event parameter(s)'dan beri birleştirin. Ancak, benim test gösterdi() en son Firefox'ta işe yaramadı. Bunun yerine bind() öğesini kullanın. Ayrıca tüm tarayıcıları desteklemek için var delta beyanı birleştirebilirsiniz:

$('html').bind('mousewheel DOMMouseScroll', function (e) { 
    var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail); 

    if (delta < 0) { 
     console.log('You scrolled down'); 
    } else if (delta > 0) { 
     console.log('You scrolled up'); 
    } 
}); 

Answer 3

modern çözüm wheel olay (IE9 +)

$('selector').on('wheel', function(event) { 
    var delta = { 
    x: event.originalEvent.deltaX, 
    y: event.originalEvent.deltaY 
    }; 

    if (delta.x != 0 || delta.y != 0) { 
    //user scrolled 
    } 
});