Html Question posted in
Some basic documentation can be found here.

Html – How to adapt responsive a horizontal line of pointer

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>
Tags:

2

Answers


  1. 0

    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.)

    Login or Signup to reply.
  2. 0

    This would do the job:

    JS:

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

      const follower = document.querySelector(".follower");
      follower.style.transform = `translateY(${y}px)`;
    });

    CSS:

    .follower {
  width: 100%;
  height: 5px;
  position: fixed;
  background: red;
  top: 0%;
  transition: transform 0s ease-in-out;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search