前言
分享兩個監測元素是否在視口內的方法
1. 位置計算
使用 Element.getBoundingClientRect() 方法返回元素相對于視口的位置
|
1
2
3
|
const isElementVisible = (el) => { const rect = el.getBoundingClientRect();}; |
獲取瀏覽器窗口的寬高
|
1
2
3
4
5
|
const isElementVisible = (el) => { const rect = el.getBoundingClientRect(); const vWidth = window.innerWidth || document.documentElement.clientWidth; const vHeight = window.innerHeight || document.documentElement.clientHeight;}; |
判斷元素是否在視口內，如圖所示
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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 相交情況變化的方法。在目標元素與視口或者其他指定元素發生交集時和觸發配置的回調函數。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 獲取要監測的元素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檢查元素在視口內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://coldstone.fun/post/2021/04/13/js-check-element/
