HTML 如何检查DOM元素在当前视口是否可见

在本文中，我们将看到如何判断DOM元素是否在当前视口可见。要确定DOM元素是否在当前视口可见，我们可以使用getBoundingClientRect()函数将其位置和尺寸与视口的尺寸进行比较，还可以使用scroll事件方法。

我们有几种方法可以判断DOM元素在当前视口是否可见，如下所述：

使用getBoundingClientRect()方法
使用Scroll事件方法

方法1：使用getBoundingClientRect()方法

JavaScript函数getBoundingClientRect()返回一个表示元素相对于视口的大小和位置的DOMRect对象。为了精确测量和定位元素，它提供了诸如x、y、width和height等特性。

语法：

value.getBoundingClientRect();

示例： 在这个示例中，我们使用getBoundingRect()方法和滚动事件来查找元素在视口中的位置。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          getBoundingClientRect() Event 
      </title> 
    <style> 
        body { 
            height: 1000px; 
        } 
  
        .myDiv { 
            width: 200px; 
            height: 200px; 
            background-color: skyblue; 
            margin: 400px auto; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="div1" class="myDiv"></div> 
  
    <script> 
        function myfunction(value) { 
            const item = value.getBoundingClientRect(); 
            return ( 
                item.top >= 0 && 
                item.left >= 0 && 
                item.bottom <= ( 
                    window.innerHeight || 
                    document.documentElement.clientHeight) && 
                item.right <= ( 
                    window.innerWidth || 
                    document.documentElement.clientWidth) 
            ); 
        } 
  
        const elementToCheck = document.getElementById('div1'); 
  
        window.addEventListener('scroll', () => { 
            if (myfunction(elementToCheck)) { 
                console.log('Element is visible in viewport'); 
            } else { 
                console.log('Element is not visible in viewport'); 
            } 
        }); 
    </script> 
</body> 
  
</html>

输出：

HTML 如何检查DOM元素在当前视口是否可见

方法2：使用滚动事件方法

在这种方法中，我们不使用getBoundingClientRect()方法，而是使用滚动事件监听器。当用户滚动时，您可以通过比较DOM元素的位置和视窗的尺寸来持续确定其是否可见，并根据元素的可见状态采取相应的操作。

语法：

object.addEventListener("scroll", myScript);

示例: 在这个示例中，我们使用了上述解释的方法。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Scroll Event Example</title> 
    <style> 
        body { 
            height: 1000px; 
        } 
  
        .myDiv { 
            width: 200px; 
            height: 200px; 
            background-color: red; 
            margin: 400px auto; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="div1" class="myDiv"></div> 
  
    <script> 
        function isElementVisible(element) { 
            const elementTop = element.offsetTop; 
            const elementBottom = elementTop  
                + element.offsetHeight; 
            const viewportTop = window.pageYOffset; 
            const viewportBottom = viewportTop  
                + window.innerHeight; 
  
            return ( 
                elementBottom > viewportTop && 
                elementTop < viewportBottom
            ); 
        } 
  
        const elementToCheck = document.getElementById('div1'); 
  
        window.addEventListener('scroll', () => { 
            if (isElementVisible(elementToCheck)) { 
                console.log('Element is visible in viewport'); 
            } else { 
                console.log('Element is not visible in viewport'); 
            } 
        }); 
    </script> 
</body> 
  
</html>

输出：

HTML 如何检查DOM元素在当前视口是否可见