使用JavaScript移动元素来处理网页滚动的问题

Question

我需要一点帮助：这是代码罪名：

html：

<div class="contain">
  <div class="background-image background-cover"></div>
  <div class="circle">
    <div class="inside blur-big background-cover"></div>
    <div class="inside blur-small background-cover"></div>
    <div class="inside clear background-cover"></div>
  </div>
</div>

CSS：

.contain {
  position: relative;
  height: 200px;
  margin-left: -98px;
  width: 150%;
}
.background-cover {
  width: 100%;
  height: 100%;
  background: no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
}
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(36, 36, 36);
  background-attachment: scroll;
  background-image: url(https://dummyimage.com/600x400/000/fff);
}
.circle {
  position: absolute;
  border-radius: 100%;
  width: 115px;
  height: 115px;
  box-sizing: border-box;
}
.circle .inside {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  background-image: url(https://dummyimage.com/600x400/000/fff);
}
.blur-big {
  height: 100%;
  width: 100%;
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
/* positioned slightly 'inside' the big blur */
.blur-small {
  margin: 5px;
  height: 105px;
  width: 105px;
  -webkit-filter: blur(1px);
  filter: blur(1px);
}
.clear {
  margin: 10px;
  height: 95px;
  width: 95px;
}

javaScript：

if ('ontouchstart' in window) {
} else
  addContainMouseMoveFunctionality(); //just add this functionality when it'll be used

function addContainMouseMoveFunctionality() {
  //do as little as possible in the mousemove-event, so initiate variables here
  let circle = document.getElementsByClassName('circle')[0];
  let contain = document.getElementsByClassName('contain')[0];
  //add event listener for the mouse enters the image, show circle
  contain.addEventListener("mousemove", moveCircle);
  //add event listener for when the mouse leaves the image, hide circle
  contain.addEventListener("mouseout", function(e) {
    //give the circle a position outside the viewport
    circle.style.top = '-999px';
    circle.style.left = '-999px';
  });
  function moveCircle(e) {
    //get the offset from the top to avoid the circle going all over the place when scrolling down or horizontally
    let doc = document.documentElement;
    let left = window.pageXOffset - doc.scrollLeft + doc.clientLeft;
    let top = window.pageYOffset - doc.scrollTop + doc.clientTop;
    //give the circle a position near the mouse, position minus half of its width/height to center it
    circle.style.top = top + e.pageY - circle.offsetHeight / 2 + 'px';
    circle.style.left = left + e.pageX - circle.offsetWidth / 2 + 98 + 'px'; // 98 is for the margin of contain
  }
}

我认为问题是这些公式，但也许不是：

circle.style.top = top + e.clientY - circle.offsetHeight / 2 + 'px';
circle.style.left = left + e.clientX - circle.offsetWidth / 2 + 98 + 'px';

这是一个小提琴，显示了它的工作方式：https：//jsfiddle.net/hw615quf/7/https://jsfiddle.net/hw615quf/7/

当您向右滚动一点时，您会看到问题是什么：围绕光标的圆圈现在不再居中了...在这个小提琴中并不是那么有问题，但是当我将代码与Smarient在WordPress站点上合并时，圆圈几乎是下降的，并且从光标的位置留下。当我向下滚动时，圆圈更靠近图像，但仍未居中...无论如何，我不希望在几乎看不到图像时我的圆圈。

也许是我的公式有问题？谁能帮我这个卷轴？

感谢您的帮助和阅读，祝您有一个愉快的白天/晚上/晚上：）

本杰明

Answer 1

clientX和 clientY不会随着页面滚动更改的修改而不会更改它们。在这种情况下，您应该使用pageX和pageY。像这样

circle.style.top = top + e.pageY - circle.offsetHeight / 2 + 'px';
circle.style.left = left + e.pageX - circle.offsetWidth / 2 + 98 + 'px'; 

这是一个有效的示例https://jsfiddle.net/681lakn0/