88

Kullanıcının kaydırdığını javascript'te nasıl tespit edebilirim?

javascript

— kullanıcı1365010
kaynak

Hayır, başka bir fonksiyondan yazmasını istiyorum if(scolling). Mı if(window.onscroll)aynı?

— user1365010

Ayarlayabilirsiniz scrollingiçinde onscroll. (ps: hayır, bu aynı değil)

— Rocket Hazmat

3

Kullanıcı asla 'kaydırmıyor'. Kaydırma durumu değil, yalnızca bir kaydırma eylemi vardır.

— Kendall Frey

1

@ user1365010: D'OH! Ben bunu düşünmedim. Tam olarak ne yapmaya çalışıyorsun Kullanıcının kaydırıp kaydırmadığını neden bilmeniz gerekiyor?

— Rocket Hazmat

2

İlginç. Bir parşömeni asla 'yeniden başlatmadım'. Detaylandırmak ister misin?

— Kendall Frey

88

bu çalışıyor:

window.onscroll = function (e) {  
// called when the window is scrolled.  
}

Düzenle:

Bunun bir TimeInterval içinde bir fonksiyon olduğunu söylediniz .. Şu şekilde
yapmayı deneyin:

userHasScrolled = false;
window.onscroll = function (e)
{
    userHasScrolled = true;
}

daha sonra Interval'inizin içine şunu ekleyin:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}

— Wampie Driessen
kaynak

Ama setInterval içindeki bir fonksiyon!

— user1365010

4

@ user1365010: Nedir? Neden bahsediyorsun? Soruya daha fazla ayrıntı eklemeniz gerekiyor.

— Rocket Hazmat

6

@ user1365010 bu cevap (özünde) yapabileceğinizin en iyisidir.

— Matt Ball

#FYI, kapsayıcı kaydırılırken uyanmıyor gibi görünüyor, body.scroll () çalışıyor, bu yüzden ikisini de ekledim

— Selva Ganapathi

11

Az önce etiketlerinizde javascript dediniz, böylece @Wampie Driessen gönderisi size yardımcı olabilir.

Ben de katkıda bulunmak istiyorum, böylece ihtiyacınız olursa jQuery'yi kullanırken aşağıdakileri kullanabilirsiniz.

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.wheelDelta< 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

Başka bir örnek:

$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
        console.log(_direction);
    });
});

— Oscar Jara
kaynak

2

JQuery'nin tarayıcı farklılıklarını soyutlaması gerekmiyor mu? Neden farklı tarayıcılar için yöntemleriniz var? Mı $('#elem').bind('scroll'yeterince iyi değil? DÜZENLEME: Boşver, 2. örneğinizi gördüm.

— Rocket Hazmat

1

arada sırada küçük bir yerel javascript ile yanlış bir şey yok.

— AGDM

Değil mi e.originalEvent.wheelDelta || e.originalEvent.detail?

— JacobRossDev

2

UYARI: Bu yanıttaki tekerlek olayları standart değildir ve kullanımdan kaldırılmıştır. wheelEtkinliği kullanın .

— Alexander O'Mara

Bunu test etmedim, ancak MDN DOMMouseScroll'a göre çoğu tarayıcıda desteklenmiyor geliştirici.mozilla.org/

— US/docs/Web/Events/DOMMouseScroll

6

window.addEventListener("scroll",function(){
    window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
    return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}

500'ü, kullanıcının "artık kaydırılmadığını" düşündüğünüz son kaydırma olayından sonraki milisaniye sayısına değiştirin.

( addEventListenerdaha iyidir onScrollçünkü eski kullanılan herhangi bir kodla güzelce bir arada olabilir onScroll.)

— Silas S. Brown
kaynak

0

Kontrol etmek için bir aralık kullanın

Kullanıcının kaydırıp kaydırmadığını kontrol etmek için bir aralık ayarlayabilir ve ardından buna göre bir şeyler yapabilirsiniz.

Büyük borç John Resig içinde yazısında .

Misal:

    let didScroll = false;

    window.onscroll = () => didScroll = true;

    setInterval(() => {
        if ( didScroll ) {
            didScroll = false;
            console.log('Someone scrolled me!')
        }
    }, 250);

Canlı örneğe bakın

— Hitautodestruct
kaynak

Kullanıcının kaydırıp kaydırmadığını tespit et

Kontrol etmek için bir aralık kullanın