javascript - 使用移动元素的 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';

这是一个展示其工作原理的 fiddle :https://jsfiddle.net/hw615quf/7/ https://jsfiddle.net/hw615quf/7/

当您稍微向右滚动时，您会看到问题所在:以光标为中心的圆现在不再居中... 在这个 fiddle 中问题不大，但是当我将我的代码与 Salient 合并到 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/