原生js写一个可以在页面上随意滚动的十字架

可以使用DOM操作和CSS样式设置来实现一个可以在页面上随意滚动的十字架，具体步骤如下：

1. 创建一个div元素，作为十字架的容器，设置其position为fixed，top和left为0，z-index为最高。

2. 在十字架容器内部，创建两个div元素，一个作为竖线，一个作为横线，设置它们的宽度和高度为1px，背景色为黑色。

3. 使用鼠标滚动事件监听，动态修改十字架容器的位置，使其跟随鼠标滚动。

下面是一个示例代码：

<div id="crosshair-container">
  <div class="crosshair-line crosshair-vertical"></div>
  <div class="crosshair-line crosshair-horizontal"></div>
</div>

#crosshair-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.crosshair-line {
  position: absolute;
  background-color: black;
}

.crosshair-vertical {
  width: 1px;
  height: 100%;
}

.crosshair-horizontal {
  width: 100%;
  height: 1px;
}

var crosshairContainer = document.getElementById('crosshair-container');
var crosshairVertical = document.querySelector('.crosshair-vertical');
var crosshairHorizontal = document.querySelector('.crosshair-horizontal');

document.addEventListener('scroll', function(e) {
  crosshairContainer.style.top = window.scrollY + 'px';
  crosshairContainer.style.left = window.scrollX + 'px';
});

这样，我们就可以在页面上随意滚动，而十字架会一直保持在页面上的固定位置。需要注意的是，为了让十字架容器始终保持在页面顶部，我们需要将其position设置为fixed，并且在滚动事件中动态修改其top和left属性。