Edit in JSFiddle

var output = document.getElementById("output");

function scrHandler() {
  var wrap = document.getElementById("wrap");
  var x = wrap.scrollLeft;
  var y = wrap.scrollTop;
  output.innerHTML = "scrollLeft: " + x + "px<br>scrollTop: " + y + "px";
}

function getSize() {
  var section = document.getElementById("section");
  var scrH = section.scrollHeight;
  var scrW = section.scrollWidth;
  output.innerHTML = "scrollHeight : " + scrH + "px, scrollWidth : " + scrW + "px";
}

function go() {
  var bottom = document.getElementById("bottomContents");
  bottom.scrollIntoView();
}

<div id="wrap" onscroll="scrHandler()">
  <div id="section">
    <div class="content">
      Top Contents...
    </div>
    <div id="bottomContents" class="content">
      Bottom Contents...
    </div>
  </div>
</div>
<p>위의 창을 스크롤 해보세요</p>
<button type="buttion" onclick="getSize()">스크롤 크기 구하기</button>
<button type="buttion" onclick="go()">Bottom Contents 영역 바로가기</button>
<div id="output"></div>

#wrap {
  width: 200px;
  height: 200px;
  overflow: scroll;
}

#section {
  width: 500px;
  background-color: lightsalmon;
  position: relative
}

.content {
  height: 480px;
  padding: 10px;
}

#bottomContents {
  background: lightblue;
}