Question

我的图像跟随鼠标使用以下内容：

＆＃13;

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

＆＃13;

.image {
  position: absolute;
  width: 5%;
  height: 10%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="image" src="Media/example.png" />

＆＃13;

当我的鼠标位于网站的底部或右侧时，问题就出现了，因为鼠标后面的图像出现在屏幕外（按预期），因此，网站上会出现一个滚动条。

我不希望鼠标后面的图片影响你能够滚动多少。我该如何解决这个问题？

Answer 1

如果您希望图片从屏幕上消失而不是展开窗口，那么您要寻找的是将 overflow: hidden 应用于body。 overflow的{{1}}都会剪切内容并隐藏滚动条：

hidden

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

.image {
  position: absolute;
  width: 5%;
  height: 10%;
}

body {
  overflow: hidden;
}

希望这有帮助！：）