I am trying to create two lines ( 1 vertical of 100 VH and 1 px width and one horizontal of 100vw and 1 px height ) that always follow mouse cursor and interest each other. I have two problems with my code: 1) I don't know what value of height I have to assign on the vertical line ( with the horizontal it was easy, I set it at 200 vw and body overflow-x hidden so it's ok ) and 2) when I scroll down, until I don't move my mouse, the horizontal line remains on the same position, it follows the cursor only after I change the mouse position. Here is my code:

const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + (e.pageY) + "px; left: " + (e.pageX) + "px;")
})

body {
  overflow-x: hidden;
  height: 5000px;
}

.cursor {
  position: absolute;
}

.cursor-lines {
  position: relative;
}

.vt {
  position: absolute;
  height: 200vh;
  top: -100vh;
  width: 1px;
  background: black;
}

.hl {
  position: absolute;
  left: -100vw;
  height: 1px;
  width: 200vw;
  background: black;
}

<div class="cursor">
  <div class="cursor-lines">
    <div class="vt"></div>
    <div class="hl"></div>
  </div>
</div>

I am trying to create two lines ( 1 vertical of 100 VH and 1 px width and one horizontal of 100vw and 1 px height ) that always follow mouse cursor and interest each other. I have two problems with my code: 1) I don't know what value of height I have to assign on the vertical line ( with the horizontal it was easy, I set it at 200 vw and body overflow-x hidden so it's ok ) and 2) when I scroll down, until I don't move my mouse, the horizontal line remains on the same position, it follows the cursor only after I change the mouse position. Here is my code:

const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + (e.pageY) + "px; left: " + (e.pageX) + "px;")
})

body {
  overflow-x: hidden;
  height: 5000px;
}

.cursor {
  position: absolute;
}

.cursor-lines {
  position: relative;
}

.vt {
  position: absolute;
  height: 200vh;
  top: -100vh;
  width: 1px;
  background: black;
}

.hl {
  position: absolute;
  left: -100vw;
  height: 1px;
  width: 200vw;
  background: black;
}

<div class="cursor">
  <div class="cursor-lines">
    <div class="vt"></div>
    <div class="hl"></div>
  </div>
</div>

• javascript
• css
• mouse-cursor

1 Answer 1

The .cursor should be a fixed area, and you should use clientX and clientY, since they are relative to the client area, and not the entire page.

Instead of moving the entire cursor, which requires an overflow, move the .vt line horizontally, and the .hl line vertically.

const cursorVT = document.querySelector('.vt')
const cursorHL = document.querySelector('.hl')

document.addEventListener('mousemove', e => {
  cursorVT.setAttribute('style', `left: ${e.clientX}px;`)
  cursorHL.setAttribute('style', `top: ${e.clientY}px;`)
})

body {
  height: 500vh;
  margin: 0;
  overflow: auto;
}

.cursor {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.vt {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: black;
}

.hl {
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  background: black;
}

<div class="cursor">
  <div class="vt"></div>
  <div class="hl"></div>
</div>