<div>
  <div>client: <span id="client"/></div>
  <div>movement: <span id="movement"/></div>
  <div>page: <span id="page"/></div>
  <div>screen: <span id="screen"/></div>
  <div style="height: 1000px; width: 1px; background-color: red;">Scroll down!!</div>
  <div>client: <span id="client1"/></div>
  <div>movement: <span id="movement1"/></div>
  <div>page: <span id="page1"/></div>
  <div>screen: <span id="screen1"/></div>
</div>
document.onmousemove = evt => {
  for (const prefix of ['client', 'movement', 'page', 'screen'])
    for (const no of ['', '1'])
      document.getElementById(`${prefix}${no}`).innerHTML = ['X', 'Y']
        .map(suffix => `${evt[`${prefix}${suffix}`]}`)
        .join(', ')
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.