如何利用JS檢查元素是否在視口內(nèi)
分享兩個監(jiān)測元素是否在視口內(nèi)的方法
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;};
判斷元素是否在視口內(nèi),如圖所示

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 方法會使瀏覽器發(fā)生回流和重繪,性能消耗稍大,但兼容性比 Intersection Observer 要好。
2. Intersection ObserverThe 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提供了一種異步檢測目標(biāo)元素與祖先元素或 viewport 相交情況變化的方法。在目標(biāo)元素與視口或者其他指定元素發(fā)生交集時和觸發(fā)配置的回調(diào)函數(shù)。
// 獲取要監(jiān)測的元素const boxes = document.querySelectorAll(’.box’)// 創(chuàng)建觀察者,配置回調(diào)函數(shù)// 通過 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
總結(jié)到此這篇關(guān)于如何利用JS檢查元素是否在視口內(nèi)的文章就介紹到這了,更多相關(guān)JS檢查元素在視口內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程2. IntelliJ IDEA配置Tomcat服務(wù)器的方法3. idea刪除項目的操作方法4. IntelliJ IDEA導(dǎo)入jar包的方法5. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法6. IntelliJ IDEA恢復(fù)刪除文件的方法7. idea重置默認(rèn)配置的方法步驟8. idea導(dǎo)入maven項目的方法9. Docker 部署 Prometheus的安裝詳細(xì)教程10. IntelliJ IDEA調(diào)整字體大小的方法

網(wǎng)公網(wǎng)安備