HTML 在整个 div 上绘制垂直线

我正在尝试跟随鼠标在整个div上画一条垂直线。问题是其他元素已经过时了。我希望这条线遍历所有内容。

这是小提琴：https://jsfiddle.net/9hzcm23q/

这是代码：

var element = document.getElementById('box');
var drawLines = function(event) {
  var x = event.pageX;
  var straightLine = element.querySelector('.straightLine');
  
  var slTrans = 'translate(' + x + 'px, 0px)';
  if(!straightLine) {
     straightLine = document.createElement('div');
     straightLine.classList.add('straightLine');
     straightLine.style.height = "100%";
     straightLine.style.width = '2px';
     element.appendChild(straightLine);
  }
  straightLine.style.transform = slTrans;
}
element.addEventListener('mousemove', function(event) {
   drawLines(event);
});

html, body{
  height: 100%;
  width: 100%;
  margin: 0px;
}
.box {
  height: 100%;
  width: 100%;
  background-color: white;
}
.straightLine {
  z-index: 10;
  position: fixed;
  background-color: red;
}

<div class="box" id="box">
  <h1>
  Lorem
  </h1>
  <p>
  dolor amet
  </p>
</div>

您需要将top: 0添加到类straightLine如下所示：

.straightLine {
  z-index: 10;
  position: fixed;
  background-color: red;
  top: 0;
}

这是一个工作小提琴

您可以将其追加为元素的第一个子元素，而不是在末尾。

var element = document.getElementById('box');
var drawLines = function(event) {
  var x = event.pageX;
  var straightLine = element.querySelector('.straightLine');
  
  var slTrans = 'translate(' + x + 'px, 0px)';
  if(!straightLine) {
     straightLine = document.createElement('div');
     straightLine.classList.add('straightLine');
     straightLine.style.height = "100%";
     straightLine.style.width = '2px';
     element.insertBefore(straightLine, element.firstChild)
  }
  straightLine.style.transform = slTrans;
}
element.addEventListener('mousemove', function(event) {
   drawLines(event);
});

html, body{
  height: 100%;
  width: 100%;
  margin: 0px;
}
.box {
  height: 100%;
  width: 100%;
  background-color: white;
}
.straightLine {
  z-index: 10;
  position: fixed;
  background-color: red;
}

<div class="box" id="box">
  <h1>
  Lorem
  </h1>
  <p>
  dolor amet
  </p>
</div>

相关内容

最新更新

热门标签：