返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何利用JS检查元素是否在视口内
  • 228
分享到

如何利用JS检查元素是否在视口内

2024-04-02 19:04:59 228人浏览 薄情痞子
摘要

前言 分享两个监测元素是否在视口内的方法 1. 位置计算 使用 Element.getBoundinGClientRect() 方法返回元素相对于视口的位置 const is

前言

分享两个监测元素是否在视口内的方法

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检查元素在视口内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 如何利用JS检查元素是否在视口内

本文链接: https://lsjlt.com/news/123525.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何利用JS检查元素是否在视口内
    前言 分享两个监测元素是否在视口内的方法 1. 位置计算 使用 Element.getBoundingClientRect() 方法返回元素相对于视口的位置 const is...
    99+
    2024-04-02
  • 怎么利用JS检查元素是否在视口内
    这篇文章给大家分享的是有关怎么利用JS检查元素是否在视口内的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言分享两个监测元素是否在视口内的方法1. 位置计算使用 Element.getBoundingClient...
    99+
    2023-06-14
  • jquery如何检查元素是否隐藏
    本篇内容主要讲解“jquery如何检查元素是否隐藏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery如何检查元素是否隐藏”吧! ...
    99+
    2024-04-02
  • jQuery如何检查元素是否可见?
    ...
    99+
    2024-04-02
  • JS如何检查数组是不是存在给定元素
    小编给大家分享一下JS如何检查数组是不是存在给定元素,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法1:利用for循环实现思想...
    99+
    2024-04-02
  • 如何检查HTML元素是否拼写错误
    这篇文章主要为大家展示了“如何检查HTML元素是否拼写错误”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何检查HTML元素是否拼写错误”这篇文章吧。 检查H...
    99+
    2024-04-02
  • JS如何判断指定dom元素是否在屏幕内
    这篇文章主要为大家展示了“JS如何判断指定dom元素是否在屏幕内”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何判断指定dom元素是否在屏幕内”这篇文章吧...
    99+
    2024-04-02
  • php怎么检查数组是否存在元素
    本教程操作环境:windows7系统、PHP8.1版、DELL G3电脑php检查数组是否存在元素的方法检查数组是否存在元素,就是检查数组是否为空数组(如果为空数组则数组中没有元素)。方法1:使用“===”判断数组是否为“[]”如...
    99+
    2024-04-02
  • Java利用布隆过滤器实现快速检查元素是否存在
    目录Guava BloomFilter基本概念应用场景优缺点实现原理示例结束语Guava BloomFilter 布隆过滤器是一个很长的二进制向量和一系列随机映射函数。布隆过滤器可以...
    99+
    2022-11-13
    Java布隆过滤器检查元素是否存在 Java布隆过滤器 Java 检查元素是否存在
  • php如何检查关联数组中指定元素是否存在
    今天小编给大家分享一下php如何检查关联数组中指定元素是否存在的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。检查方法:1、用...
    99+
    2023-07-05
  • jquery如何检测元素是否隐藏
    今天小编给大家分享一下jquery如何检测元素是否隐藏的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。3种方法:1、使用css...
    99+
    2023-07-04
  • vue如何判断元素是否在可视区域
    今天小编给大家分享一下vue如何判断元素是否在可视区域的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。三种方法:1、利用off...
    99+
    2023-07-04
  • javascript与php怎么检查元素是否在数组中
    这篇文章主要讲解了“javascript与php怎么检查元素是否在数组中”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript与php怎么检查元...
    99+
    2024-04-02
  • JS判断元素是否在可视区域技巧详解
    目录前言实现方式offsetTop、scrollTop注意getBoundingClientRect前言 在日常开发中,我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一...
    99+
    2022-12-20
    JS判断元素可视区域 JS 元素可视区域
  • js如何检查属性是否存在对象中
    这篇文章主要介绍js如何检查属性是否存在对象中,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!检查属性是否存在对象中可以使用 in 关键字来检查 JavaScript 对象中是否存在某个属性。const pe...
    99+
    2023-06-27
  • js如何检查对象是否为空
    小编给大家分享一下js如何检查对象是否为空,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!检查对象是否为空如果我们想要检查对象是否为空,可以使用以下方式:Objec...
    99+
    2023-06-02
  • 如何判断元素是否在可视区域中IntersectionObserver
    本文小编为大家详细介绍“如何判断元素是否在可视区域中IntersectionObserver”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何判断元素是否在可视区域中IntersectionObserver”文章能帮助大家解决疑惑,下面跟...
    99+
    2023-07-05
  • jquery如何查找指定html元素是否存在
    本篇内容介绍了“jquery如何查找指定html元素是否存在”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2024-04-02
  • javascript如何查找指定数组元素是否存在
    今天小编给大家分享一下javascript如何查找指定数组元素是否存在的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,...
    99+
    2024-04-02
  • sql如何检查表是否存在
    在 SQL 中,可以使用以下语句检查表是否存在: IF EXISTS (SELECT 1 FROM sys.tables W...
    99+
    2024-04-20
    sql
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作