如何使图像不影响滚动条？

Question

我的鼠标后面有一张图片，使用以下内容：

​

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

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

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

​

当我的鼠标在网站的底部或右手边出现问题时，我的鼠标后面的图像就会离开屏幕(如预期的那样)，正因为如此，网站上出现了一个滚动条。

我不想让鼠标后面的图片影响你的滚动能力。我该怎么解决这个问题？

Answer 1

如果希望图像从屏幕上消失，而不是展开窗口，则需要将overflow: hidden应用于body。overflow of 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="image" src="http://placehold.it/100" />

​

希望这会有帮助！)