Question

我正在编写一个简单的脚本，当用户将鼠标悬停在个人资料图片上时会显示一个对话框。它动态确定页面上的配置文件图片位置，然后将其自身置于其左侧，并在其上方约100px。这部分工作正常。

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

我的问题是如何知道对话框什么时候出现在屏幕上，以便重新计算其在页面上的位置？

我看到this question看起来和我的一样，但遗憾的是，除了链接到jQuery插件之外，没有提供实际的解决方案。我正在使用Prototype。

Answer 1

你想找到相对于文档的配置文件pic的位置（这里是a good article on how，虽然我怀疑Prototype的Element.Offset已经处理了这个），然后将它与身体的scrollTop进行比较属性，看它是否足够接近顶部，需要重新定位对话框。

Answer 2

我熟悉这个问题，但是，上次我能够使用库（Seadragon）来获取屏幕尺寸和鼠标位置。我还使用固定大小的叠加层，因此除了一般方法之外，没有代码可以与您分享。

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

来自How do I get the size of the browser window using 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/

Answer 3

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
}

如何知道元素什么时候会出现屏幕？

3 个答案: