如何知道元素何时会离开屏幕

How to know when an element will be off screen?

本文关键字：离开 屏幕 何时会 元素 何知道      更新时间：2023-09-26

我正在编写一个简单的脚本，当用户悬停在个人资料图片上时，该脚本会显示一个对话框。它动态地确定配置文件图片在页面上的位置，然后将自己放在页面的左边，大约100px。这部分工作得很好。

当一个个人资料图片位于屏幕顶部，用户将鼠标悬停在上面时，我的问题就出现了。对话框会出现，但它的顶部会在折叠上方（即不在当前浏览器窗口中）。当然，这不是很好的可用性，我希望它能出现在屏幕上。

我的问题是，我如何知道对话框何时会离开屏幕，以便重新计算它在页面上的位置？

我看到了这个问题，看起来和我的问题一样，但不幸的是，除了链接到jQuery插件之外，没有提供实际的解决方案。我正在使用Prototype。

Prototype已经提供了Element.viewportOffset()的位置。

编辑，正如Mathew所指出的，document.viewport提供了其余信息。例如，

var dialogtop = dialog.viewportOffset().top;
if (dialogtop < 0) {
    // above top of screen
}
elseif (dialogtop + dialog.getHeight > document.viewport.getHeight()) {
    // below bottom of screen
}

您需要找到配置文件图片相对于文档的位置（这是一篇关于如何处理的好文章，尽管我怀疑Prototype的Element.Offset已经处理过了），然后将其与主体的scrollTop属性进行比较，看看它是否离顶部足够近，需要重新定位对话框。

我很熟悉这个问题，但上次我能够使用库（Seadragon）来获取屏幕尺寸和鼠标位置。我还使用了一个固定大小的覆盖，所以除了通用方法之外，没有其他代码可以与您共享。

对于我的弹出框，我决定使用事件鼠标的位置，而不是页面上div的位置。然后，我将鼠标位置与已知的屏幕大小进行了比较，这是我在启动或调整大小时确定的。

如何使用Prototype.js获取浏览器窗口的大小？

var viewport = document.viewport.getDimensions(); // Gets the viewport as an object literal
var width = viewport.width; // Usable window width
var height = viewport.height; // Usable window height

在Prototype中，您还可以获得鼠标坐标：

function getcords(e){
mouseX = Event.pointerX(e);
mouseY = Event.pointerY(e);
//for testing put the mouse cords in a div for testing purposes
$('debug').innerHTML = 'mouseX:' + mouseX + '-- mouseY:' + mouseY;
}

来源：http://remorse.nl/2008/06/mouse_coordinates_with_prototype/

相关文章：