首頁(yè) 猿問如何確定jQuery滾動(dòng)事件的方向？

如何確定jQuery滾動(dòng)事件的方向？

JavaScript JQuery

陪伴而非守候 2019-06-10 16:16:46

如何確定jQuery滾動(dòng)事件的方向？我在尋找這樣的東西：$(window).scroll(function(event){ if (/* magic code*/ ){ // upscroll code } else { // downscroll code }});有什么想法嗎？

查看完整描述

3 回答

絕地?zé)o雙

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個(gè)贊

檢查電流scrollTop與以前scrollTop

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

反對(duì) 回復(fù) 2019-06-10

藍(lán)山帝景

TA貢獻(xiàn)1843條經(jīng)驗(yàn) 獲得超7個(gè)贊

您可以這樣做，而不必跟蹤上一個(gè)滾動(dòng)頂部，正如所有其他示例所要求的那樣：

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

我不是這方面的專家，所以可以繼續(xù)研究，但是當(dāng)你使用$(element).scroll，正在收聽的事件是“滾動(dòng)”事件。

但如果你特別聽一聽mousewheel事件，通過使用綁定，originalEvent回調(diào)的事件參數(shù)的屬性包含不同的信息。部分信息是wheelDelta..如果是陽(yáng)性的話，你就把鼠標(biāo)動(dòng)起來(lái)。如果是陰性，你就把鼠標(biāo)向下移動(dòng)。

我猜是mousewheel事件將在鼠標(biāo)輪轉(zhuǎn)動(dòng)時(shí)觸發(fā)，即使頁(yè)面沒有滾動(dòng)；在這種情況下，“滾動(dòng)”事件可能不會(huì)被觸發(fā)。如果你愿意，你可以打電話event.preventDefault()在回調(diào)的底部，以防止頁(yè)面滾動(dòng)，以便您可以將鼠標(biāo)輪事件用于頁(yè)面滾動(dòng)以外的其他內(nèi)容，例如某種類型的縮放功能。

反對(duì) 回復(fù) 2019-06-10

慕沐林林

TA貢獻(xiàn)2016條經(jīng)驗(yàn) 獲得超9個(gè)贊

存儲(chǔ)上一個(gè)滾動(dòng)位置，然后查看新滾動(dòng)位置是否大于或小于該位置。

以下是避免任何全局變量的方法(這里有小提琴):

(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

反對(duì) 回復(fù) 2019-06-10