scrollTop

by ginpei

HTML

<div class="fuwari">
  <code>documentElement</code>: <span class="html-scrollTop"></span>
  <br />
  <code>body</code>: <span class="body-scrollTop"></span>
  <br />
  <code>scrollingElement</code>: <span class="scrolling-scrollTop"></span>
</div>

CSS

html {
  height: 100%;
}
body {
  height: 200%;
}
.fuwari {
  position: fixed;
}

JavaScript

var elHtmlTop = document.querySelector('.html-scrollTop');
var elBodyTop = document.querySelector('.body-scrollTop');
var elScrollingTop = document.querySelector('.scrolling-scrollTop');

document.onscroll = updateTop;
updateTop();

function updateTop(event) {
	elHtmlTop.innerHTML = document.documentElement.scrollTop;
	elBodyTop.innerHTML = document.body.scrollTop;
	elScrollingTop.innerHTML = document.scrollingElement && document.scrollingElement.scrollTop;
}