如何使用 JavaScript 判断一个元素是否在可视范围内

前言

本篇文章是作者在准备春招时,JS的学习感悟。假如您也和我一样,在准备春招。欢迎加我微信shunwuyu ,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!"

正文

在Web开发中,有时我们需要知道一个元素是否在用户的可视范围内,以便执行相应的操作,比如延迟加载图片、实现懒加载、或是触发动画效果。 本文将详细介绍使用 JavaScript 如何判断一个元素是否在可视范围内的几种方法。

1. 使用 getBoundingClientRect() 方法

JavaScript 中的 getBoundingClientRect() 方法返回一个元素的大小及其相对于视口的位置信息。这个信息包括元素的上下左右边界的坐标,以及它们相对于视口的距离。通过这些信息,我们可以判断元素是否在可视范围内。

下面是一个示例函数,用于检查元素是否在可视范围内:

js 复制代码
function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

2. 使用 Intersection Observer API

Intersection Observer API 用于异步监测元素与其祖先元素或根元素(viewport)的交叉状态。使用这个 API,我们可以注册一个观察器,当目标元素进入或离开视口时,会触发相应的回调函数。

以下是一个简单的示例,演示如何使用 Intersection Observer API:

js 复制代码
var observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      // 元素进入视口
      console.log("Element is in viewport!");
    } else {
      // 元素离开视口
      console.log("Element is out of viewport!");
    }
  });
});

var target = document.querySelector('#targetElement');
observer.observe(target);

3. offsetTop、scrollTop

offsetTop,元素的上外边框至包含元素的上内边框之间的像素距离,其他offset属性如下图所示:

下面再来了解下clientWidthclientHeight

  • clientWidth:元素内容区宽度加上左右内边距宽度,即clientWidth = content + padding
  • clientHeight:元素内容区高度加上上下内边距高度,即clientHeight = content + padding

这里可以看到client元素都不包括外边距

最后,关于scroll系列的属性如下:

  • scrollWidthscrollHeight 主要用于确定元素内容的实际大小
  • scrollLeftscrollTop 属性既可以确定元素当前滚动的状态,也可以设置元素的滚动位置
    • 垂直滚动 scrollTop > 0
    • 水平滚动 scrollLeft > 0
  • 将元素的 scrollLeftscrollTop 设置为 0,可以重置元素的滚动位置

代码实现:

js 复制代码
function isInViewPortOfOne (el) {
    // viewPortHeight 兼容所有浏览器写法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const offsetTop = el.offsetTop
    const scrollTop = document.documentElement.scrollTop
    const top = offsetTop - scrollTop
    return top <= viewPortHeight
}
相关推荐
墨夏2 分钟前
Tauri + NextJS 扫码登录
android·前端·ios
天生我材必有用_吴用3 分钟前
Three.js开发必备:灯光详解附带案例
前端
会飞的架狗师10 分钟前
【面试题】如何保证MQ的消息不丢失、不重复
java·面试·kafka·java-rocketmq
Hilaku21 分钟前
用好了 watchEffect 才算会用 Vue3 —— 那些让人误解的响应式陷阱
前端·javascript·vue.js
GISer_Jing26 分钟前
Zustand 状态管理库:极简而强大的解决方案
前端·javascript·react.js
zacksleo26 分钟前
鸿蒙Flutter实战:25-混合开发详解-5-跳转Flutter页面
前端·flutter·harmonyos
zacksleo32 分钟前
鸿蒙Flutter实战:23-混合开发详解-3-源码模式引入
前端·flutter·harmonyos
三年三月33 分钟前
018-场景遍历和世界坐标系
前端·three.js
zacksleo35 分钟前
鸿蒙Flutter实战:22-混合开发详解-2-Har包模式引入
前端·flutter·harmonyos
doubleZ37 分钟前
使用Trae从零开发一个跳转顶部的Chrome插件
前端·javascript