Jquery - 停止鼠标锁定位置:绝对从扩展页面

Jquery - stop mouse-locked position:absolute from extending page?

本文关键字:扩展 鼠标锁定 位置 Jquery      更新时间:2023-09-26

我一直在研究的光标黑客遇到了一些麻烦。

在我的网站上,我有一个"秘密"页面,出于某种原因,我必须在该页面上有一个动画光标。

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

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

本质上,位于 body 标签中的 position:absolutediv 位于视口之外,这会导致滚动条扩展出现问题。 自然,这不是我想要发生的事情。

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

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

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

编辑2:对于视觉参考,这与我的设置几乎相同:http://jsfiddle.net/BfLAh/1/尝试将鼠标移动到窗口的底部/右侧,您将看到问题。

尝试使用 transform 属性将元素translate到正确的位置 – AFAIK 将元素"定位"到视口之外,这不应该使文档度量值增加。

如果您发现光标元素一开始的位置为 0/0(例如通过放置
#Cursor{position:absolute;top:0;left:0;}在您的样式表中(,那么我认为您应该能够将 pageX/pageY 值作为翻译参数,如下所示

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