Scroll event

by Ukjin Yang

HTML

<div id="scroller">
<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>
</div>
<pre id="out">scrollTop: 0</pre>

CSS

html, body {
  margin:0;padding:0;
  width:100%;height:100%;
  overflow:hidden;
}

#scroller {
  background-color:palegreen;
  height: 230px;
  overflow-y: auto;
}

JavaScript

document.querySelector('#scroller').addEventListener('scroll', function(e){
	document.querySelector('#out').innerHTML = 'scrollTop: ' + e.target.scrollTop
})