javascript - 使用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

如果可以忽略窗口中最上面一行的像素，那么您可以将滚动位置设置为向下一个像素。然后，如果用户向上滚动到该区域，就会发生好事。

你可以尝试这样的 fiddle :

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>