Erkennen Scrollen oben auf der Webseite mit Javascript

Question

Ich möchte erkennen, ob der Benutzer zum oberen Rand einer Webseite scrollt, wenn er bereits oben ist. Das bedeutet, dass normales Scrollen keine Aktion auslösen soll, nur wenn sich die Scrollleiste oben befindet und der Benutzer weiter nach oben scrollt, tut es etwas.

Ich habe versucht mit dem Code unten, aber es löst aus, wenn der Benutzer oben ankommt und nicht, wenn er es "überstreift". Here ist die 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

Wenn es akzeptabel, die oberste Zeile von Pixeln in dem Fenster zu ignorieren, dann können Sie die Bildlaufposition an einem Pixel nach unten gesetzt. Wenn der Benutzer dann in diese Zone scrollt, passieren gute Dinge.

Man könnte so etwas wie diese Geige versuchen:

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>