How to adapt responsive a horizontal line of pointer

Question

I am currently attempting to implement a horizontal pointer in a read/guide line mode. However, during testing on responsive devices, it does not extend fully across the width of the screen. Such as, on tablet and phone.

Could someone please advise on how to ensure that the horizontal pointer spans the entire width of the screen on responsive devices?

Thank you in advance!

document.addEventListener("mousemove", (e) => {
  const x = window.innerWidth;
  const y = e.pageY - window.pageYOffset;

  const follower = document.querySelector(".follower");
  follower.style.transform = `translate3d(${x}px, ${y}px, 0)`;
});

html,
body {
  padding: 0;
  margin: 0;
}
#content {
  height: 2048px;
  background-color: #ccc;
}
#status {
  position: fixed;
  top: 0;
  left: 0;
}

.follower {
  width: 100%;
  height: 5px;
  position: fixed;
  background: red;
  top: 0%;
  left: -100%;
  transition: transform 0s ease-in-out;
}

<div class="follower"></div>
<div id="content"></div>

Answer 1

Not sure what the point of translating this on the x-axis is supposed to be here in the first place.

Make this translate3d(0, ${y}px, 0), and left: 0 for the initial position, and it should work as intended.

(Using window.innerWidth often causes issues because of how the scrollbar width influences the result.)