sample: detect the scroll direction with vanilla JS

by sii_side

HTML

<input id="s">

<p>
hoge

<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><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><br><br><br><br><br><br>

fuga
</p>

CSS

#s {
  position: fixed;
  top: 10px;
  right: 10px;
}

JavaScript

var before_y = 0;

window.addEventListener("scroll", function(e) {
  var after_y = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
  
  if(after_y > before_y) {
  	document.querySelector("#s").value = "↓";
  } else {
   	document.querySelector("#s").value = "↑";
  }
  
  before_y = after_y;
}, false);