如何利用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 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 相交情況變化的方法。在目標元素與視口或者其他指定元素發(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
總結
到此這篇關于如何利用JS檢查元素是否在視口內(nèi)的文章就介紹到這了,更多相關JS檢查元素在視口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
this?指向的值是可以通過手動方式去改變的,比如call、bind、apply方法,本文主要為大家介紹了這三種方式的具體實現(xiàn)步驟,需要的可以參考下2023-12-12
javascript DOM操作之動態(tài)刪除TABLE多行
DOM動態(tài)刪除TABLE tr行的實現(xiàn)代碼，需要的朋友可以參考下。2009-12-12
利用Query+bootstrap和js兩種方式實現(xiàn)日期選擇器
日期選擇器在我們平時開發(fā)的時候經(jīng)常要用到，下面這篇文章主要給大家介紹了利用Query+bootstrap和js這兩種方式實現(xiàn)日期選擇器的方法,文中兩種方法都給出了詳細的示例代碼，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
FireFox下XML對象轉(zhuǎn)化成字符串的解決方法
近，在客戶端解吸xml時候，需要將XML轉(zhuǎn)化成字符串，看了很多文章，介紹的最多的是將XML字符串轉(zhuǎn)化成對象2011-12-12
其實為js文件傳參是很久就接觸過的一個問題，只是一直沒有放在心上，今天在無憂看到又有人問這個問題，今日總結一下。2010-05-05
這篇文章主要介紹了微信小程序接入vant Weapp組件的詳細步驟,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了js獲得當前系統(tǒng)日期時間的方法，涉及javascript操作日期時間的相關技巧，非常簡單實用，需要的朋友可以參考下2015-09-09
js字符串日期yyyy-MM-dd轉(zhuǎn)化為date示例代碼
獲取表單中的日期往后臺通過json方式傳的時候,遇到Date.parse(str)函數(shù)在ff下報錯，有類似情況的朋友可以參考下本文2014-03-03
Firefox中autocomplete="off" 設置不起作用Bug的解決方法
在實現(xiàn)補全提示功能時(Suggest)，都會給輸入框(Input)元素添加autocomplete屬性，且值設為off。2011-03-03