<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(', ')
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.