我如何檢測滾動位置與jQuery沒有綁定滾動事件？

Question

我正在創建一個模型升降機，但有兩件事造成麻煩。

1. 更新.floor-number以反映當前的地板上。

   看來我應該與內容屬性更改.floor-number像這樣：

   .content-property { 
   visibility: hidden; 
   } 
   .content-property::after { 
   visibility: visible; 
   content: "3"; 
   } 
   

   ，然後檢測當用戶停止滾動，並添加與jQuery的addClass上述CSS。但那真的很笨拙。

2. 電梯正在向上時顯示綠色.up指示燈，電梯正在向下時顯示紅色.down指示燈。

演示： https://jsfiddle.net/5rzzbunk/2/

Answer 1

爲了您的第一部分，你可以簡單地使用：

var current_floor = $(this).html(); 
$('.floor-number').html(current_floor); 

這將更新.floor-number以反映當前的地板上。

---

爲了檢測滾動，你將需要使用 scroll()功能：

(function() { 
    var previousScroll = 0; 
    $(window).scroll(function() { 
     var currentScroll = $(this).scrollTop(); 
     if (currentScroll > previousScroll){ 
      $('.up').fadeOut(100); 
      $('.down').fadeIn(100); 
     } 
     else { 
      $('.down').fadeOut(100); 
      $('.up').fadeIn(100); 
     } 
     previousScroll = currentScroll; 
    }); 
}()); 

---

Here is an Example覆蓋你的問題的兩個部分。

Answer 2

接受的答案有我的贊成，但出於好奇，我寫了一個小函數來計算滾動事件的數量。

• 火狐約60約20

在

Chrome和Opera略低於40

的Internet Explorer（可能不是因爲默認情況下平滑滾動的其他國家要高）：結果不同的瀏覽器有所不同我的設置至少...

http://codepen.io/anon/pen/xbNOdG

可能與顯示幀率有關。如果它被插入，它不應該是一個資源hogger太多。但是看看自己是否值得限制。

var i, first = true, then, finished, elapsed, triggers; 

$(window).scroll(function() { 

if (first) { 
i = 0; 
first = false; 
then = new Date().getTime(); 
} 

i++; 
clearTimeout(finished); 
checkScroll(); 

function checkScroll() { 

finished = setTimeout(function() { 
elapsed = new Date().getTime()-then-150; 
triggers = Math.round(1000/(elapsed/i)); 
first = true; 
$('#log').html(triggers + '</br>events per second'); 
}, 150); 
} 
}); 

儘管如此，它可以是按鼠標滾輪事件的單個動作（這應該默認爲滾動）如果使用這種整齊的擴展：

https://plugins.jquery.com/mousewheel/

$(window).mousewheel(function(turn, delta) { 

if (delta == -1) { 
$('.up').fadeOut(100); 
$('.down').fadeIn(100); 
} 
else { 
$('.up').fadeIn(100); 
$('.down').fadeOut(100); 
} 
}); 

的wheel事件可能取代這個當Opera開始支持它時。