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; |
网上有插件或例子吗?
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 的帖子,它帮助我解决了"完全可见元素"的问题,但是我不得不将建议调整为以下内容,因为我的父
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); } |