如何利用JS检查元素是否在视口内

前言

分享两个监测元素是否在视口内的方法

1. 位置计算

使用 element.getboundingclientrect() 方法返回元素相对于视口的位置

获取浏览器窗口的宽高

判断元素是否在视口内，如图所示

getboundingclientrect 方法会使浏览器发生回流和重绘，性能消耗稍大，但兼容性比 intersection observer 要好。

2. intersection observer

the intersection observer api provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

intersection observer api提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。在目标元素与视口或者其他指定元素发生交集时和触发配置的回调函数。

参考

intersection observer api

总结

到此这篇关于如何利用js检查元素是否在视口内的文章就介绍到这了,更多相关js检查元素在视口内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！