JavaScript判断DOM元素是否进入可视区域的原理与实现

作者：小圆点

时间：2026-10-21

本文详解利用JavaScript判断DOM元素是否进入屏幕可视区域的实现原理。核心逻辑通过计算滚动条位置与元素坐标，判断元素中心点是否位于窗口上下边界之间。文章提供了完整的HTML与JS代码示例，演示如何根据可见状态触发CSS动画，适用于滚动加载或入场特效等场景。

文章目录

前言与背景

前言

在浏览网页时，常会遇到一种交互效果：当某个DOM元素滚动进入用户可见区域时，会触发显示动画，视觉效果生动。这种效果是如何实现的呢？

实现原理

要实现上述功能，首先需要理解其背后的核心逻辑。下面直接切入主题进行说明。

浏览器在渲染网页时，页面布局与DOM元素的坐标是相对固定的，发生变化的只是当前可视窗口（视口）在页面中的位置。理解了这一点，判断元素是否可见就变得直观。

前言与背景

页面的长宽以及各DOM元素的坐标是静止的，动态变化的是显示窗口的坐标。因此，判断一个DOM元素是否可见的逻辑非常清晰。

要确定当前DOM元素是否在可见区域内，我们需要关注三个关键坐标值，分别是：

显示窗口（视口）的顶部坐标
显示窗口（视口）的底部坐标
DOM元素的中心坐标

判断规则如下：当DOM元素中心点的X坐标和Y坐标均小于显示窗口顶部坐标，且大于显示窗口底部坐标时，即可判定该元素位于可见区域内。

明确了判断逻辑后，接下来需要解决如何计算这三个关键坐标值的问题。

首先是窗口顶部坐标，其数值等于页面滚动条滚动的距离（即scrollTop）。

其次是窗口底部坐标，其数值等于滚动条滚动的距离加上当前可视窗口的高度（clientHeight）。

最后是DOM元素的中心坐标，其数值等于该DOM元素距离页面顶部的偏移量（offsetTop）加上元素自身高度的一半。

原理其实非常简单。

具体实现代码

具体实现

理解了原理后，具体编码实现就相对容易了。下面直接提供一个简单的DOM代码示例。在实际生产环境中，还需进行性能优化，例如处理首屏显示逻辑等，此处不再赘述。


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<style type="text/css">
 .box {
 width: 100%;
 height: 200px;
 background: #ff0000;
 margin-bottom: 10px;
 text-align: center;
 color: #fff;
 line-height: 200px;
 font-family: microsoft yahei;
 font-size: 40px;
 
 }
 .animate{
 animation: showText 1s;
 }
 @keyframes showText
 {
 from {
 font-size: 20px;
 }
 to {
 font-size: 40px;
 }
 }
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
<script type="text/javascript">
 
 var box = document.getElementsByClassName('box');
 document.addEventListener('scroll',function(){
  
  //滚动条高度+视窗高度 = 可见区域底部高度
  var visibleBottom = window.scrollY + document.documentElement.clientHeight;
  //可见区域顶部高度
  var visibleTop = window.scrollY;
  for (var i = 0; i < box.length; i++) {
  var centerY = box[i].offsetTop+(box[i].offsetHeight/2);
  if(centerY>visibleTop&&centerY<visibleBottom){
   box[i].innerHTML = '区域可见'
   box[i].setAttribute("class",'box animate')
   console.log('第'+i+'个区域可见');
  }else{
   box[i].innerHTML = '';
   box[i].setAttribute("class",'box')
   console.log('第'+i+'个区域不可见');
  }
  }
 })
</script>
</html>