如何操作JS查抄元素是否在视口内

这篇文章主要给各人先容了关于如何操作JS查抄元素是否在视口内的相关资料，文中通过示例代码先容的很是具体，对各人的进修可能事情具有必然的参考进修代价，需要的伴侣们下面跟着小编来一起进修进修吧

媒介

分享两个监测元素是否在视口内的要领

1. 位置计较

利用 Element.getBoundingClientRect() 要领返回元素相对付视口的位置

const isElementVisible = (el) => { const rect = el.getBoundingClientRect(); };

获取欣赏器窗口的宽高

const isElementVisible = (el) => { const rect = el.getBoundingClientRect(); const vWidth = window.innerWidth || document.documentElement.clientWidth; const vHeight = window.innerHeight || document.documentElement.clientHeight; };

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

const isElementVisible = (el) => { const rect = el.getBoundingClientRect() const vWidth = window.innerWidth || document.documentElement.clientWidth const vHeight = window.innerHeight || document.documentElement.clientHeight if ( rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight ) { return false } return true }

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 相交环境变革的要领。在方针元素与视口可能其他指定元素产生交集时和触发设置的回调函数。

// 获取要监测的元素 const boxes = document.querySelectorAll('.box') // 建设调查者，设置回调函数 // 通过 isIntersecting 属性判定元素与视口是否相交 const observer = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { console.log( entry.target, entry.isIntersecting ? "visible" : "invisible" ); }); }) boxes.forEach((box) => { observer.observe(box); });

参考

how-to-check-an-element-is-in-viewport-4bcl

Intersection Observer API

总结

到此这篇关于如何操作JS查抄元素是否在视口内的文章就先容到这了,更多相关JS查抄元素在视口内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！