Вертикальные и горизонтальные линии, которые всегда пересекают курсор мыши

Я пытаюсь создать две линии (1 вертикальную 100VH и 1 пиксель в ширину и одну горизонтальную 100vw и 1 пиксель в высоту), которые всегда следуют за курсором мыши и интересуют друг друга. У меня есть две проблемы с моим кодом: 1) я не знаю, какое значение высоты я должен присвоить вертикальной линии (с горизонтальной было легко, я установил его на 200 vw и body overflow-x скрыто, так что все в порядке ) и 2) когда я прокручиваю вниз, пока я не двигаю мышью, горизонтальная линия остается в том же положении, она следует за курсором только после того, как я изменю положение мыши. Вот мой код:

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
person Bogdan Florin    schedule 02.11.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

.cursor должна быть фиксированной областью, и вы должны использовать clientX и clientY, так как они относятся к клиентской области, а не ко всей странице.

Вместо перемещения всего курсора, что требует переполнения, переместите строку .vt по горизонтали, а строку .hl по вертикали.

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>

person Ori Drori    schedule 02.11.2019
comment
Отличный ответ! Я не думал об этом! Круто~ - person Diamond; 02.11.2019