鼠标光标跟随器限制到body

Question

我目前有this，鼠标光标后面的一个俯冲。。但是当我接近网站的边缘时，它会创建滚动条之类的，我该如何限制它停留在身体里，当它露出面纱时隐藏起来，而不是扩展网站。。

这是JS；

var mouseX = 0, mouseY = 0;
$(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
});
// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 1;
    yp += (mouseY - yp) / 1;
    follower.css({left:xp+5, top:yp+5});
}, 30);

这是CSS：

#follower{
  position : absolute;
  background-color : red;
  color : white;
  padding : 10px;
}

然后是HTML:

<div id="follower">Move your mouse</div>

非常感谢任何帮助。。感谢

Answer 1

您需要将包含元素的溢出属性设置为hidden

在你的小提琴你可以添加

body
{
    overflow:hidden;
}

到您的CSS-http://jsfiddle.net/xYJwF/1/

Answer 2

可以尝试以下操作；

<div id="mousecontainer" style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden;">
    <div id="follower" />
</div>

然后使用clientX而不是pageX，因此位置相对于屏幕而不是页面位置

编辑：另外；将以下内容添加到鼠标容器样式中：

mouse-event: none;

这将允许页面的其余部分按预期运行