使用JavaScript判断一个元素是否在可视范围内的几种方法

希曼

前言

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

1. 使用 getBoundingClientRect() 方法

JavaScript 中的

1. getBoundingClientRect()

复制代码

方法返回一个元素的大小及其相对于视口的位置信息。这个信息包括元素的上下左右边界的坐标，以及它们相对于视口的距离。通过这些信息，我们可以判断元素是否在可视范围内。
下面是一个示例函数，用于检查元素是否在可视范围内：

1. function isElementInViewport(el) {
   
2.   var rect = el.getBoundingClientRect();
   
3.   return (
   
4.     rect.top >= 0 &&
   
5.     rect.left >= 0 &&
   
6.     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
   
7.     rect.right <= (window.innerWidth || document.documentElement.clientWidth)
   
8.   );
   
9. }

复制代码

2. 使用 Intersection Observer API

Intersection Observer API 用于异步监测元素与其祖先元素或根元素（viewport）的交叉状态。使用这个 API，我们可以注册一个观察器，当目标元素进入或离开视口时，会触发相应的回调函数。
以下是一个简单的示例，演示如何使用 Intersection Observer API：

1. var observer = new IntersectionObserver(function(entries) {
   
2.   entries.forEach(function(entry) {
   
3.     if (entry.isIntersecting) {
   
4.       // 元素进入视口
   
5.       console.log("Element is in viewport!");
   
6.     } else {
   
7.       // 元素离开视口
   
8.       console.log("Element is out of viewport!");
   
9.     }
   
10.   });
    
11. });
    
12. 
    
13. var target = document.querySelector('#targetElement');
    
14. observer.observe(target);

复制代码

3. offsetTop、scrollTop

1. offsetTop

复制代码

，元素的上外边框至包含元素的上内边框之间的像素距离，其他

1. offset

复制代码

属性如下图所示：

下面再来了解下

1. clientWidth

复制代码

、

1. clientHeight

复制代码

：

• 1. clientWidth

  复制代码
  ：元素内容区宽度加上左右内边距宽度，即
  1. clientWidth = content + padding

  复制代码
• 1. clientHeight

  复制代码
  ：元素内容区高度加上上下内边距高度，即
  1. clientHeight = content + padding

  复制代码

这里可以看到

1. client

复制代码

元素都不包括外边距
最后，关于

1. scroll

复制代码

系列的属性如下：

• 1. scrollWidth

  复制代码
  和
  1. scrollHeight

  复制代码
  主要用于确定元素内容的实际大小
  
• 1. scrollLeft

  复制代码
  和
  1. scrollTop

  复制代码
  属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置
  
• 
  
  
  
  • 垂直滚动
    1. scrollTop > 0

    复制代码
  • 水平滚动
    1. scrollLeft > 0

    复制代码
  
  
• 将元素的
  1. scrollLeft

  复制代码
  和
  1. scrollTop

  复制代码
  设置为 0，可以重置元素的滚动位置
  

代码实现：

1. function isInViewPortOfOne (el) {
   
2.     // viewPortHeight 兼容所有浏览器写法
   
3.     const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
   
4.     const offsetTop = el.offsetTop
   
5.     const scrollTop = document.documentElement.scrollTop
   
6.     const top = offsetTop - scrollTop
   
7.     return top <= viewPortHeight
   
8. }

复制代码

到此这篇关于使用JavaScript判断一个元素是否在可视范围内的几种方法的文章就介绍到这了,更多相关JavaScript判断元素可视范围内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/316115pxz.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！