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

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

0 голосов
/ 02 ноября 2019

Я пытаюсь создать две линии (1 по вертикали 100 ВХ и 1 пикселя по ширине и одну горизонталь по 100 ВВт и 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>

1 Ответ

2 голосов
/ 02 ноября 2019

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