如何知道元素何时会离开屏幕? [英] How to know when an element will be off screen?

问题描述

我正在编写一个简单的脚本，当用户将鼠标悬停在个人资料图片上时，该脚本会显示一个对话框.它动态地确定页面上的个人资料图片位置，然后将自己放置在它的左侧和它上方大约 100 像素处.这部分工作正常.

I am writing a simple script that displays a dialog box when a user hovers over a profile picture. It dynamically determines the profile pics location on the page and then places itself to the left of it and about 100px above it. This part is working fine.

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

My issue arises when a profile pic is at the top of the screen and a user mouses over it. The dialog will appear but the top portion of it will be above the fold (i.e. not in the current browser window). Naturally this is not good usability and I would like it to appear on the screen.

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

My question is how do I know when a dialog will be off screen so I can recalculate its position on the page?

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

I saw this question which seems like the same as mine but unfortunately no actual solution was provided other then to link to a jQuery plugin. I am using Prototype.

推荐答案

Prototype 已经通过 提供了位置Element.viewportOffset().

Prototype already provides positions with Element.viewportOffset().

编辑，正如 Mathew 指出的那样document.viewport 给出了其余的信息.例如，

Edit, as Mathew points out document.viewport gives the rest of the information. For example,

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

这篇关于如何知道元素何时会离开屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！