Bir jQuery scroll olayının yönünü nasıl belirleyebilirim?


344

Bu etki için bir şey arıyorum:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

Herhangi bir fikir?


Elastik kaydırma ile ilgili problemleri olanlar için lütfen bu cevabı kullanın stackoverflow.com/questions/7154967/jquery-detect-scrolldown
Timothy Dalton

1
wheelBu günlerde etkinliği kullanmak en kolayı : stackoverflow.com/a/33334461/3168107 .
Shikkediel

Yanıtlar:


699

Geçerli Kontrol scrollTopönceki vsscrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

16
Bunun için bir hassasiyet oluşturmanın herhangi bir yolu var mı?
kakao kodlayıcı

8
Bu kod alanında bir örnek yaptım. Belki de popülerliği nedeniyle bu cevabı bir jQuery eklentisiyle güncelleyeceğim.
Josiah Ruddell

3
Bu kodu içeren bir önceki sayfaya dönerseniz bunu denediniz mi? Sayfanızı aşağı kaydırırsanız, 500PX diyelim. Başka bir sayfaya gidin ve ardından ilk sayfaya geri dönün. Bazı tarayıcılar kaydırma konumunu korur ve sizi sayfanın altına geri getirir. lastScrollTop0'da bir başlangıç yapacak mısınız yoksa uygun şekilde başlatılacak mı ??
TCHdvlp

7
@TCHdvlp - en kötü durum senaryosu, ilk scroll olayının değişkeni güncelleyeceği ve ikinci olayın doğru olacağı anlamına gelir (.. sadece geri navigasyondan sonra bir yukarı kaydırmada önemli olacaktır). Bu var lastScrollTop = $(window).scrollTop(), tarayıcı sayfa yüklemesinde kaydırma konumunu güncelledikten sonra ayarlanarak düzeltilebilir .
Josiah Ruddell

2
Bu konuda bir güncelleme: Bazı tarayıcıların, özellikle Windows 8'de IE 11'in, alt piksel tabanlı bir kaydırma olayını (düzgün kaydırma) tetikleyebileceğine dikkat edin. Ancak scrollTop öğesini bir tamsayı olarak bildirdiği için, önceki kaydırma değeriniz geçerli olanla aynı olabilir.
Renato

168

Diğer tüm örneklerin gerektirdiği gibi, önceki kaydırma üstünü takip etmek zorunda kalmadan yapabilirsiniz:

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

Bu konuda uzman değilim, bu yüzden daha fazla araştırma yapmaktan çekinmeyin, ancak kullandığınızda $(element).scroll, dinlenen olayın bir 'kaydırma' olayı olduğu anlaşılıyor .

Ancak özellikle mousewheelbind kullanarak bir olayı dinlerseniz originalEvent, olay parametresinin geri aramanıza ait özniteliği farklı bilgiler içerir. Bu bilgilerin bir kısmı wheelDelta. Olumlu ise, fare tekerleğini yukarı kaldırdınız. Negatifse, fare tekerleğini aşağı hareket ettirdiniz.

Benim tahminime göre mousewheelsayfa kaydırma yapmasa bile fare tekerleği döndüğünde olaylar tetiklenir; 'kaydırma' olaylarının büyük olasılıkla tetiklenmediği bir durum. İsterseniz, event.preventDefault()sayfanın kaymasını önlemek için geri aramanızın altında arama yapabilir ve fare tekerleği olayını, bazı yakınlaştırma işlevleri gibi, sayfa kaydırma dışında bir şey için kullanabilirsiniz.


13
Güzel ama ne yazık ki tek ve tek Firefox desteklemiyor developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/… (FF v15'te test edilmiştir). : C
nuala

8
Bu benim için yararlı oldu: Sayfanın kendisi gerçekten kaydırılmasa da, scrollTopgüncellenmediğinden , kaydırmayı algılamam gerekiyordu . Aslında $(window).scroll()hiç ateş etmedi.
Martti Laine

13
Eski duruma ihtiyaç duymamanız güzel. Ancak bu teknik, fare tekerleğine sahip olmadıkları için cep telefonlarında veya tabletlerde çalışmaz!
joeytwiddle

13
Klavye ile kaydırırsam bu yaklaşım işe yaramaz. Yakınlaştırma gibi şeyler için kesinlikle ilginç bir yaklaşım ama kaydırma yönü sorusunu ele aldığını sanmıyorum.
chmac

6
$ ("html, body"). bind ({'fare tekerleği DOMMouseScroll onmousewheel touchmove scroll': işlev (e) {// ...}); tüm tarayıcı kaydırma verilerini algılamada benim için çalışıyor
GoreDefex

31

Önceki kaydırma konumunu kaydedin, ardından yenisinin bundan daha büyük veya daha küçük olup olmadığına bakın.

Global değişkenlerden kaçınmanın bir yolu ( keman burada mevcuttur ):

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

29

Mevcut Çözüm

Bu gönderi ve diğer yanıttan 3 çözüm olabilir .

Çözüm 1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

Çözüm 2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

Çözüm 3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

Çoklu Tarayıcı Testi

Safari'de test edemedim

chrome 42 (Galibiyet 7)

  • Çözüm 1
    • Yukarı: 1 kaydırmada 1 etkinlik
    • Aşağı: 1 kaydırmada 1 etkinlik
  • Çözüm 2
    • Yukarı: Çalışmıyor
    • Aşağı: Çalışmıyor
  • Çözüm 3
    • Yukarı: 1 kaydırmada 1 etkinlik
    • Aşağı: 1 kaydırmada 1 etkinlik

Firefox 37 (Win 7)

  • Çözüm 1
    • Yukarı: 1 kaydırmada 20 etkinlik
    • Aşağı: 1 kaydırmada 20 etkinlik
  • Çözüm 2
    • Yukarı: Çalışmıyor
    • Aşağı: 1 kaydırmada 1 etkinlik
  • Çözüm 3
    • Yukarı: Çalışmıyor
    • Aşağı: Çalışmıyor

IE 11 (Galibiyet 8)

  • Çözüm 1
    • Yukarı: 1 kaydırmada 10 olay (yan etki: sonunda aşağı kaydırma)
    • Aşağı: 1 kaydırmada 10 etkinlik
  • Çözüm 2
    • Yukarı: Çalışmıyor
    • Aşağı: Çalışmıyor
  • Çözüm 3
    • Yukarı: Çalışmıyor
    • Aşağı: 1 kaydırmada 1 etkinlik

IE 10 (Galibiyet 7)

  • Çözüm 1
    • Yukarı: 1 kaydırmada 1 etkinlik
    • Aşağı: 1 kaydırmada 1 etkinlik
  • Çözüm 2
    • Yukarı: Çalışmıyor
    • Aşağı: Çalışmıyor
  • Çözüm 3
    • Yukarı: 1 kaydırmada 1 etkinlik
    • Aşağı: 1 kaydırmada 1 etkinlik

IE 9 (Galibiyet 7)

  • Çözüm 1
    • Yukarı: 1 kaydırmada 1 etkinlik
    • Aşağı: 1 kaydırmada 1 etkinlik
  • Çözüm 2
    • Yukarı: Çalışmıyor
    • Aşağı: Çalışmıyor
  • Çözüm 3
    • Yukarı: 1 kaydırmada 1 etkinlik
    • Aşağı: 1 kaydırmada 1 etkinlik

IE 8 (Galibiyet 7)

  • Çözüm 1
    • Yukarı: 1 kaydırmada 2 olay (yan etki: sonunda aşağı kaydırma)
    • Aşağı: 1 kaydırmada 2 ~ 4 etkinlik
  • Çözüm 2
    • Yukarı: Çalışmıyor
    • Aşağı: Çalışmıyor
  • Çözüm 3
    • Yukarı: 1 kaydırmada 1 etkinlik
    • Aşağı: 1 kaydırmada 1 etkinlik

Kombine Çözüm

IE 11 ve IE 8'in yan etkisinin if elseifadeden geldiğini kontrol ettim . Bu yüzden if else ifaşağıdaki ifadeyle değiştirdim .

Çoklu tarayıcı testinden, yaygın tarayıcılar için Çözüm 3'ü ve firefox ve IE 11 için Çözüm 1'i kullanmaya karar verdim .

Ben sevk Bu yanıt IE 11 algılamak için.

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }

Birisi sonuç ekleyebilseydi Safari browser, çözümü tamamlamak faydalı olurdu.
Kimyasal Programcı

Hata! Mobil Chrome ve Android varsayılan tarayıcısının yalnızca Çözüm 1 kapsamında olduğunu gördüm. Bu nedenle, Çözüm 1 ve 3'ü çeşitli tarayıcıları kapsayacak şekilde birlikte kullanmak daha iyi olur.
Kimyasal Programcı

Tasarım sabit bir düzen tasarımı ise çalışmaz. Statik kaydırmasız bir web sitesinde kaydırma yönünü tespit etmek istiyorsanız, Firefox ve IE11 çalışmaz
Shannon Hochkins

Bunu kullandığımda, kromdaki "Diğer Tarayıcılar" ı kullandığını, hem fare tekerleği hem de kaydırma çubuğu ile kaydırmayı algılamak istediğinizde bu gerçekten fazla bir kullanım olmadığını görüyorum. .scroll, kromda her iki kaydırma türünü de algılar.
Sam

12

Zaten kabul edilmiş bir cevap olduğunu anlıyorum, ancak herkese yardımcı olması durumunda kullandığım şeyi göndermek istedim. cliphexFare tekerleği olayında olduğu gibi ancak Firefox desteği ile yön alıyorum . Kaydırma kilitleme gibi bir şey yapıyorsanız ve geçerli kaydırma üstünü alamıyorsanız, bu şekilde yapmak yararlıdır.

Burada canlı bir sürüme bakın .

$(window).on('mousewheel DOMMouseScroll', function (e) {

    var direction = (function () {

        var delta = (e.type === 'DOMMouseScroll' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
       // scroll down
    }
    if(direction === 0) {
       // scroll up
    }
});

@EtienneMartin yukarıdaki kod hatanıza neden olan şeyse jQuery'ye dayanır. Çalıştığını görmek için lütfen ekteki kemanı inceleyin.
souporserious

8

Kaydırma Etkinliği

Kaydırma olay garip bir şekilde FF davranacağını (bunun nedeni kaydırma pürüzsüzlük bir çok kez ateşlendiğinde) ama işe yarıyor.

Not: kaydırma aslında olay tetiklenir kaydırma çubuğunu sürükleyerek imleç tuşlarını veya tekeri kullanarak.

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

Tekerlek Etkinliği

Ayrıca MDN'ye de bakabilirsiniz, Wheel Event hakkında harika bir bilgi ortaya koyar .

Not: Tekerlek olayı yalnızca fare tekerleği kullanılırken tetiklenir ; imleç tuşlarını ve kaydırma çubuğunu sürüklemek olayı başlatmaz.

Belgeyi ve örneği okudum: Tarayıcıda bu olayın dinlenmesi
ve FF, IE, chrome, safari ile yapılan bazı testlerden sonra bu snippet ile sonuçlandım:

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

2
Gerçek kaydırma çubuğunu devre dışı bırakan sabit bir panel görünümüm var, bu yüzden fare tekerleğinden yönü algılamam gerekiyordu. Fare tekerleği çözümünüz mükemmel çapraz tarayıcı çalıştı, bu yüzden teşekkür ederim!
Shannon Hochkins

8

Yalnızca bir işaretçi aygıtı (fare veya izleme paneli) kullanarak yukarı veya aşağı kaydırıp kaydırmayacağınızı bilmek isterseniz , olayın deltaY özelliğini kullanabilirsiniz wheel.

$('.container').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $('.result').append('Scrolled down!<br>');
  } else {
    $('.result').append('Scrolled up!<br>');
  }
});
.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>



3
var tempScrollTop, currentScrollTop = 0; 

$(window).scroll(function(){ 

   currentScrollTop = $("#div").scrollTop(); 

   if (tempScrollTop > currentScrollTop ) {
       // upscroll code
   }
  else if (tempScrollTop < currentScrollTop ){
      // downscroll code
  }

  tempScrollTop = currentScrollTop; 
} 

veya fare tekerleği uzantısını kullanın, buraya bakın .


3

Burada iyi cevapların birçok sürümünü gördüm ama bazı millet çapraz tarayıcı sorunları yaşıyor gibi görünüyor, bu yüzden bu benim düzeltmem.

Bunu başarıyla FF, IE ve Chrome'da algılamak için kullandım ... Genellikle pencereleri kullandığım için safari'de test etmedim.

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': 
    function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();

        //Determine Direction
        if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
            //Up
            alert("up");

        } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
            //Up
            alert("up");

        } else {
            //Down
            alert("down");
        }
    }
});

Bunu ayrıca herhangi bir kaydırmayı durdurmak için de kullandığımı unutmayın. Kaydırma işleminin yine de gerçekleşmesini istiyorsanız e.preventDefault(); e.stopPropagation();


1
her zaman android GS5 geri döner
SISYN

Bu harika çalıştı! IE'de en çok oy alan cevapla ilgili bir sorunum vardı. Bunun bir sorunu yok! Benden +1.
Radyasyon

3

Sayfanın üstünde ve altında bulunan herhangi bir çıtçıt / momentum / geri dönmeyi yok saymak için, Josiah'ın kabul edilen cevabının değiştirilmiş bir versiyonu :

var prevScrollTop = 0;
$(window).scroll(function(event){

    var scrollTop = $(this).scrollTop();

    if ( scrollTop < 0 ) {
        scrollTop = 0;
    }
    if ( scrollTop > $('body').height() - $(window).height() ) {
        scrollTop = $('body').height() - $(window).height();
    }

    if (scrollTop >= prevScrollTop && scrollTop) {
        // scrolling down
    } else {
        // scrolling up
    }

    prevScrollTop = scrollTop;
});

3

Mousewhell yönünü belirleyebilirsiniz.

$(window).on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta ? 
                   e.originalEvent.wheelDelta : -e.originalEvent.detail;

    if (delta >= 0) {
        console.log('scroll up');
    } else {
        console.log('scroll down');
    }
});

3

Kaydırma yönünü bulmak için bunu kullanın. Bu yalnızca Dikey Kaydırma yönünü bulmak içindir. Tüm çapraz tarayıcıları destekler.

    var scrollableElement = document.getElementById('scrollableElement');

    scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);

    function findScrollDirectionOtherBrowsers(event){
        var delta;

        if (event.wheelDelta){
            delta = event.wheelDelta;
        }else{
            delta = -1 * event.deltaY;
        }

        if (delta < 0){
            console.log("DOWN");
        }else if (delta > 0){
            console.log("UP");
        }

    }

Misal


3

bu kod IE, Firefox, Opera ve Chrome ile sorunsuz çalışır:

$(window).bind('wheel mousewheel', function(event) {
      if (event.originalEvent.deltaY >= 0) {
          console.log('Scroll down');
      }
      else {
          console.log('Scroll up');
      }
  });

'tekerlek mousewheel' ve özelliği deltaY kullanım olmalıdır bağlanan () işlev.

Unutmayın: Kullanıcı, güvenlik nedeniyle sistemlerini ve tarayıcılarını güncellemelidir. 2018 yılında, "IE 7 sahibiyim" bahaneleri saçmadır. Kullanıcıları eğitmeliyiz.

İyi günler :)


1
Kodunuzu denedim ve bu başka bir yol. Birincisi aşağı kaydırılırken, ikincisi yukarı kaydırılırken tetiklenir.
AlexioVay

Merhaba :) Teşekkürler AlexioVay. Kodumu düzenledim (Yaklaşık zaman da!) ^^. Tabii ki "console.log ('.......')" sadece neler yapabileceğimizin bir örneği.
Cyril Morales

2

Süper basit olsun:

jQuery Olay Dinleyici Yolu:

$(window).on('wheel', function(){
  whichDirection(event);
});

Vanilya JavaScript Etkinlik Dinleyici Yolu:

if(window.addEventListener){
  addEventListener('wheel', whichDirection, false);
} else if (window.attachEvent) {
  attachEvent('wheel', whichDirection, false);
}

İşlev Aynı Kalıyor:

function whichDirection(event){
  console.log(event + ' WheelEvent has all kinds of good stuff to work with');
  var scrollDirection = event.deltaY;
  if(scrollDirection === 1){
    console.log('meet me at the club, going down', scrollDirection);
  } else if(scrollDirection === -1) {
    console.log('Going up, on a tuesday', scrollDirection);
  }
}

Bunun üzerine daha derin bir mesaj yazdı Burada


Jquery sürümünü kullanmak için jquery-wheel gerekli mi?
Hastig Zusammenstellen

1
jquery-wheel bunun için gerekli değildir @HastigZusammenstellen
CR Rollyson

2

Tek seferde yukarı ve aşağı hareketi izlemek için hem kaydırma hem de fare tekerleği seçeneğini kullanabilirsiniz.

 $('body').bind('scroll mousewheel', function(event) {

if (event.originalEvent.wheelDelta >= 0) {
      console.log('moving down');   
    }
    else {
      console.log('moving up'); 
    }
});

'Gövde'yi (pencere) ile de değiştirebilirsiniz.


Chrome'da iyi çalışıyor, ancak FF'de çalışmıyor gibi görünüyor (55.0.2, Ubuntu)
Hastig Zusammenstellen

1

.data ()kaydırılan öğenin artımını kaydederseniz, kaydırmanın en üste ulaşma sayısını test edebilirsiniz.


1

Neden kimse kaydırma ile eventdöndürülen nesneyi kullanmıyor jQuery?

$window.on('scroll', function (event) {
    console.group('Scroll');
    console.info('Scroll event:', event);
    console.info('Position:', this.pageYOffset);
    console.info('Direction:', event.originalEvent.dir); // Here is the direction
    console.groupEnd();
});

Ben kullanıyorum chromiumve dirözelliği varsa diğer tarayıcılarda kontrol etmedi .


1

Yana bindgeçerliliğini yitirmiştir ( "yerini v3 on") ve wheelşimdi desteklenir , unutmak wheelDelta:

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else {
    console.log('up');
  }
  if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else {
    console.log('left');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
</h1>

wheeletkinliğin MDN'lerde Tarayıcı Uyumluluğu (2019-03-18) :

Tekerlek etkinliğinin uyumluluğu


Yukarıdaki kod iki konsol günlüğü üretir, yukarı / aşağı / sola / sağa tamamen ayırmak için aşağıdakileri kullanın: if(e.originalEvent.deltaY > 0) { console.log('down'); } else if(e.originalEvent.deltaY < 0) { console.log('up'); } else if(e.originalEvent.deltaX > 0) { console.log('right'); } else if(e.originalEvent.deltaX < 0) { console.log('left'); }
Don Wilson

touchmoveBunun yerine mobil kullanım etkinliği için.
CPHPython

1

Bunu da kullanabilirsiniz

$(document).ready(function(){

  var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function(){
Get_page_scroll_direction();
});

function Get_page_scroll_direction(){
  var running_scroll_position = $(window).scrollTop();
  if(running_scroll_position > currentscroll_position) {
      
      $('.direction_value').text('Scrolling Down Scripts');

  } else {
       
       $('.direction_value').text('Scrolling Up Scripts');

  }
  currentscroll_position = running_scroll_position;
}

});
.direction_value{
  position: fixed;
  height: 30px;
  background-color: #333;
  color: #fff;
  text-align: center;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>


0

içinde .data()sen fırlatma olaylara bir JSON ve test değerlerini saklayabilir elemanın

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}

0

Bu, kullanıcı sayfanın üstünden uzaklaştığında ve en üste döndüğünde basit ve kolay bir algılamadır.

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});

0

Bu, kullanıcı kaydırma işlemini sonlandırdığında yönü algılamak için en uygun çözümdür.

var currentScrollTop = 0 ;

$(window).bind('scroll', function () {     

    scrollTop = $(this).scrollTop();

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

        if(scrollTop > currentScrollTop){
            // downscroll code
            $('.mfb-component--bl').addClass('mfbHide');
        }else{
            // upscroll code
            $('.mfb-component--bl').removeClass('mfbHide');
        }
        currentScrollTop = scrollTop;

    }, 250));

});

0

Bunu denemelisin

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });

0

Elastik kaydırma ile ilgili problemlerim vardı (kaydırma sıçraması, lastik bantlama). Sayfanın üst kısmına yakın benim için çalıştıysa aşağı kaydırma olayını yoksaymak.

var position = $(window).scrollTop();
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    var downScroll = scroll > position;
    var closeToTop = -120 < scroll && scroll < 120;
    if (downScroll && !closeToTop) {
        // scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
        $('.top-container').slideUp('fast');
        $('.main-header').addClass('padding-top');
    } else {
        // scrolled up
        $('.top-container').slideDown('fast');
        $('.main-header').removeClass('padding-top');
    }
    position = scroll;
});

0

Bu, en iyi cevapları genişleterek tüm pc veya telefon tarayıcılarında çalışır. Daha karmaşık bir olay nesnesi penceresi ["scroll_evt"] oluşturabilir ve sonra handleScroll () işlevinde çağırabilirsiniz. Bu, bazı gecikme süreleri geçtiyse veya bazı istenmeyen tetikleyicileri ortadan kaldırmak için belirli deltalar geçtiğinde, 2 eşzamanlı koşul için tetiklenir.

window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {

    var currentScroll = $(this).scrollTop();
    var currentTime = Date.now();
    var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
    boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
    if(boolRun){
        window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
        window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
        window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
        window["scroll_evt"]["pos"] = currentScroll;
        window["scroll_evt"]["time"] = currentTime;
        handleScroll();
    }
});


function handleScroll(){
    event.stopPropagation();
    //alert(window["scroll_evt"]["direction"]);
    console.log(window["scroll_evt"]);
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.