javascript - 鼠标在溢出 JavaScript 的容器中移动

Question

我有一个 200px 的容器，它本身有一个 400px 高度 的容器，我有一个跟踪鼠标对象，它在 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

因为在定位光标元素时没有考虑 .container 的 scrollTop 属性。试试这个:

let container = $('.container'); //<-- get container
$(document).mousemove(e => {
    $("#image").css({
        left: e.pageX,
        top: e.pageY + container[0].scrollTop //<-- add scroll top too
    });
});

为了提高效率，最好将对 #image 的引用缓存一次，而不是每次事件触发时都重新获取它。

let
container = $('.container'),
image = $('#image')
;
$(document).mousemove(e => {
    image.css({ ...