javascript - Jquery - 停止鼠标锁定位置 :absolute from extending page?

Question

我在处理 cursorhack 时遇到了一些问题。

在我的网站上，我有一个“ secret ”页面，出于某些原因，我必须在该页面上有一个动画光标。

这个动画光标实际上是一个位置:位于主体内的绝对 div，由 CSS 动画提供支持。在大多数情况下，这是有效的。我仍然需要找出如何禁用光标本身，但它有效。

但是，每当我将鼠标移动到视口(viewport)的右侧/底部时，页面就会开始扩展。这是因为 div 是一个绝对 div，所以当它向右/底部移动时，页面会扩展以允许您查看刚刚离开视口(viewport)的光标部分。

本质上，位于 body 标签中的 position:absolute div 位于视口(viewport)之外，这会导致滚动条扩展出现问题。当然，这不是我想要发生的。

有什么办法可以阻止这种情况发生吗？

编辑:这也是我正在使用的代码片段。如果有帮助:

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

Edit2:作为视觉引用，这与我的设置几乎相同:http://jsfiddle.net/BfLAh/1/尝试将鼠标移到窗口的底部/右侧，您会看到问题。

Answer 1

尝试使用 transform 属性来 translate将元素放到正确的位置 – AFAIK 使用该元素将元素“定位”在视口(viewport)之外不应使文档尺寸增加。

如果你看到你的光标元素定位在 0/0 开始(比如通过放置
#Cursor{position:absolute;top:0;left:0;} 在你的样式表中)，那么我认为你应该能够只使用 pageX/pageY 值作为翻译参数，像这样

$("#Cursor").css({
  transform: "translate("+e.pageX+"px, "+e.pageY+"px)"
});