关于 jquery：如何确定 HTML 元素是否在屏幕外？

How can I determine if an HTML element is offscreen?

如何使用 jQuery 确定给定元素是在可视窗口区域的顶部上方还是在其底部下方？这将允许我确定该项目是否在屏幕外以及在哪个方向。

理想情况下：

1
2
3

var topPos = $(this).relativeToTop();
var bottomPos = $(this).relativeToBottom();
var isOnScreen = topPos >= 0 && bottomPos >= 0;

网上有插件或例子吗？

相关讨论

我现在真的没有时间回答，但我会指出，如果您希望某些元素在页面的滚动部分(例如，带有 overflow: auto 的 )或只是窗口中不可见，它会有所帮助.

1
2
3
4
5
6
7
8
9

var off = $(this).offset();
var t = off.top;
var l = off.left;
var h = $(this).height();
var w = $(this).width();
var docH = $(window).height();
var docW = $(window).width();

var isEntirelyVisible = (t > 0 && l > 0 && t + h < docH && l+ w < docW);

编辑
在那里的某个地方，检查 $(document).scrollTop() 也可能是一个想法，这取决于您希望脚本如何处理滚动状态…

感谢 David 的帖子，它帮助我解决了”完全可见元素”的问题，但是我不得不将建议调整为以下内容，因为我的父 div 区域大于可见窗口大小。以下代码对我有用，虽然我只需要担心垂直。

elem 是一个 jquery 对象，这可能只适用于 html5

1
2
3
4
5
6
7
8
9
10
11
12

function isFullyVisible (elem) {
var off = elem.offset();
var et = off.top;
var el = off.left;
var eh = elem.height();
var ew = elem.width();
var wh = window.innerHeight;
var ww = window.innerWidth;
var wx = window.pageXOffset;
var wy = window.pageYOffset;
return (et >= wy && el >= wx && et + eh <= wh + wy && el + ew <= ww + wx);
}

How can I determine if an HTML element is offscreen?

猜你喜欢