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); } |
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/268759.html