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

Question

我想要在用戶滾動到網頁頂部時，如果他已經位於頂部，我想要這樣做。這意味着正常的滾動不應該觸發一個動作，就像滾動條位於頂部並且用戶進一步滾動到頂部時它做了某事。

我試着用下面的代碼，但是當用戶到達頂部時觸發，而不是當他「過度滾動」它時觸發。 Here是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>