Question

我有一个200px容器，它本身带有一个400px height容器，我有一个跟踪鼠标对象，它在mousemove事件中随之移动

当我将鼠标移到没有溢出的部分时，一切都很好，但是当我向下滚动对象时，不再跟踪鼠标了

$(document).mousemove(function(e) {
  $("#image").css({
    left: e.pageX,
    top: e.pageY
  });
});

#image {
  position: absolute;
}

.container {
  height: 200px;
  overflow: auto;
}

.image-container {
  position: relative;
  height: 400px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="image-container">
    &nbsp;
    <img id="image" src="http://images.pictureshunt.com/pics/m/mouse-8557.JPG" />
  </div>
</div>

这里也有JSFiddle链接。

Answer 1

因为在放置光标元素时没有考虑scrollTop的{{1}}属性。试试这个：

.container

为了提高效率，最好将一次let container = $('.container'); //<-- get container $(document).mousemove(e => { $("#image").css({ left: e.pageX, top: e.pageY + container[0].scrollTop //<-- add scroll top too }); });的引用缓存一次，而不是每次事件触发时都重新获取它。

#image

鼠标在带有溢出JavaScript的容器中移动

1 个答案: