如何利用JS檢查元素是否在視口內(nèi)
前言
分享兩個(gè)監(jiān)測(cè)元素是否在視口內(nèi)的方法
1. 位置計(jì)算
使用 Element.getBoundingClientRect() 方法返回元素相對(duì)于視口的位置
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 方法會(huì)使瀏覽器發(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提供了一種異步檢測(cè)目標(biāo)元素與祖先元素或 viewport 相交情況變化的方法。在目標(biāo)元素與視口或者其他指定元素發(fā)生交集時(shí)和觸發(fā)配置的回調(diào)函數(shù)。
// 獲取要監(jiān)測(cè)的元素
const boxes = document.querySelectorAll('.box')
// 創(chuàng)建觀察者，配置回調(diào)函數(shù)
// 通過(guò) 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
總結(jié)
到此這篇關(guān)于如何利用JS檢查元素是否在視口內(nèi)的文章就介紹到這了,更多相關(guān)JS檢查元素在視口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript時(shí)間復(fù)雜度和空間復(fù)雜度
這篇文章主要介紹了JavaScript時(shí)間復(fù)雜度和空間復(fù)雜度，時(shí)間復(fù)雜度和空間復(fù)雜度是衡量一個(gè)算法是否優(yōu)秀的標(biāo)準(zhǔn)，通常我們比較兩個(gè)算法時(shí)會(huì)用預(yù)先估算和事后統(tǒng)計(jì)，下文詳細(xì)介紹，需要的朋友可以參考一下2022-07-07
JavaScript無(wú)阻塞加載和defer、async詳解
JS具有阻塞特性，當(dāng)瀏覽器在執(zhí)行js代碼時(shí)，不能同時(shí)做其它事情，所有瀏覽器在下載JS的時(shí)候，會(huì)阻止一切其他活動(dòng)，比如其他資源的下載，內(nèi)容的呈現(xiàn)等等。至到JS下載、解析、執(zhí)行完畢后才開(kāi)始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。2017-02-02
JavaScript數(shù)據(jù)推送Comet技術(shù)詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)推送Comet技術(shù)，感興趣的小伙伴們可以參考一下2016-04-04
javascript獲取下拉列表框當(dāng)中的文本值示例代碼
需要將用戶(hù)點(diǎn)擊下拉列表當(dāng)中某個(gè)選項(xiàng)后，將其所選的內(nèi)容保存起來(lái)，下面與大家分享下如何使用js獲取下拉列表框文本值，由此需求的朋友可以參考下2013-07-07
限時(shí)搶購(gòu)-倒計(jì)時(shí)的完整實(shí)例(分享)
下面小編就為大家?guī)?lái)一篇限時(shí)搶購(gòu)-倒計(jì)時(shí)的完整實(shí)例(分享)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
p5.js入門(mén)教程之平滑過(guò)渡(Easing)
本篇文章主要介紹了p5.js入門(mén)教程之平滑過(guò)渡(Easing)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
利用JavaScript做數(shù)獨(dú)的完整實(shí)現(xiàn)過(guò)程
數(shù)獨(dú)游戲是在一個(gè)9*9的方格中進(jìn)行填數(shù)字的游戲,需要滿足的規(guī)則是每行每列和每個(gè)子九宮格都是1~9的不重復(fù)數(shù)字,下面這篇文章主要給大家介紹了關(guān)于如何利用JavaScript做數(shù)獨(dú)的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了js讀取配置文件的方法,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序頁(yè)面生命周期的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
微信小程序時(shí)間標(biāo)簽和時(shí)間范圍的聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序時(shí)間標(biāo)簽和時(shí)間范圍的聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02