如何快速判断 DOM 元素位于 viewport 以外?

不是判断元素是否可见,而是判断是否超出浏览器可见范围,滚动条后可见。
关注者
61
被浏览
3681
从理论上说,判断元素不可见,也就是判断它满足下列4个条件之一:
  • 元素在视窗上面
  • 元素在视窗下面
  • 元素在视窗左边
  • 元素在视窗右边
那么举其中一例来说,“如何判断元素在视窗下面”?
只需:“窗口滚动在竖直方向已经向滚上去了的距离 >= 元素在页面布局中离左上角的竖直距离 + 元素高度”即可
翻译成jQuery是
$(window).scrollTop() >= $element.offset().top + $element.height()
(>=也可以是>,这个没有统一定论)
其他的三个条件的判断方法类似,在这里就不一一展开了。

判断元素是否出现在了视窗中,是实现延迟懒加载图片的一个必要判断条件,所以题主也可以在各种“图片懒加载”实现方案中找到对应的方式,比如:
lazyload/lazyload.js at master · jieyou/lazyload · GitHub
lazyload/lazyload.js at master · jieyou/lazyload · GitHub
https://github.com/jieyou/lazyload/blob/master/lazyload.js#L73
lazyload/lazyload.js at master · jieyou/lazyload · GitHub

另外,通常有很多页面只能在竖直方向滚动,不能在水平方向滚动,于是我们可以不判断“元素在视窗左边”和“元素在视窗右边”,这样可以提高一些性能效率。
有些“图片懒加载”实现方案也提供了这个配置项,如上面这个方案中,这个配置项是“ vertical_only”,对应逻辑在lazyload/lazyload.js at master · jieyou/lazyload · GitHub