<div id="wrap">
  <input
    id='update'
    type="button"
    value="スクロール後にクリック">

  <table>
    <thead>
    <tr>
      <th>property</th>
      <th>position</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>window.scrollX</td>
      <td><span id="scrollX"></span>px</td>
    </tr>
    <tr>
      <td>window.scrollY</td>
      <td><span id="scrollY"></span>px</td>
    </tr>
    </tbody>
  </table>
</div>
body {
  height: 1000px;
  width: 3000px;
}

#wrap {
  position: fixed;
}

table {
  margin-top: 16px;
  border-collapse: collapse;
}

table th, table td {
  border: solid 1px #ccc;
  padding: 4px;
}
update = e => {
  document.getElementById('scrollX').textContent = window.scrollX
  document.getElementById('scrollY').textContent = window.scrollY
}

btn = document.getElementById('update')
btn.addEventListener(
  'click', 
  e => update(),
  false
)

update()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.