<div id="content"></div>
<p id="scroll-content">スクロール量：<span id="scroll-num"></span></p>
*{
  text-align:center;
  font-size:5vw;
  margin:0;
}

#content{
  height:1000px;
  width:100%;
  background:#009977;
}

#scroll-content{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:10;
}
const scrollNum = document.getElementById('scroll-num');

window.onscroll = function(){
  scrollNum.textContent = window.pageYOffset;
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.