使用javascript檢測網頁頂部的滾動

Question

如果用戶已經滾動到網頁的頂部，我想檢查一下。 這意味着普通滾動不應觸發動作，即使滾動條在頂部並且用戶進一步滾動到頂部也可以執行操作。

我嘗試使用下面的代碼，但是它在用戶到達頂部時觸發，而不是在用戶“過度滾動”時觸發。 這是jsfiddle。

 window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) ==window.innerHeight) { alert("The action"); } document.getElementById('a').innerHTML= window.scrollY+";"+window.innerHeight+";"+(window.innerHeight+ + window.scrollY); }; 

 p{ position: fixed; } 

 <br> <br><br> <br> <p id="a">sdf </p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 

Answer 1

如果可以忽略窗口中像素的頂行，則可以將滾動位置設置為向下一個像素。 然后，如果用戶向上滾動到該區域，那么好事就會發生。

您可以嘗試像這樣的小提琴：

 var scrolling = false, w = $(window); w.scrollTop(1); w.on({ scroll: function() { if(w.scrollTop() === 0){ // are we in the 'zero bufferzone'? $('#monitor').text('overscrolling'); } clearTimeout(scrolling); // reset timer scrolling = setTimeout(function() { if(w.scrollTop() === 0){ w.scrollTop(1); // shift down by a pixel $('#monitor').text(''); // reset } }, 250); } }); 

 body{ height: 3000px; } #monitor{ position: fixed; left: 1em; bottom: 1em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='monitor'></div>