Mouse coordinates

by Simon Hi

HTML

<div id="trace">DĂ©placez la souris ici</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>

CSS

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: #ccc;
  min-height: 200vh;
  font-size: 3rem;
}

div {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

p {
  margin: 0;
  padding: 1rem;
}

JavaScript

function magic(ev) {
  var s;
  s = (window.scrollX + ev.clientX) + " " + (window.scrollY + ev.clientY);
  document.getElementById("trace").innerHTML = s;
}
document.body.addEventListener("mousemove", magic);