判断dom元素是否滚动到底、是否在可视区域

念念不忘必有回响

已于 2024-05-27 17:16:34 修改

阅读量833

点赞数 16

分类专栏： html5 文章标签： javascript 前端 html

于 2024-05-27 17:10:53 首次发布

本文链接：https://blog.csdn.net/m0_45093055/article/details/139240947

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

概览

我们日常开发中，在面对懒加载、虚拟列表需求时，经常需要判断dom元素是否滚动到底、是否在可视区域。但是由于涉及的属性太多了，比如scrollTop、clientHeight、scrollHeight、getBoundingClientRect()等属性，现根据这两个场景，加深对相关的属性的认识。

一. 判断dom元素是否滚动到底

scrollTop: 元素顶部到元素可视区域顶部的像素距离（可读写）
clientHeight: 元素的像素高度，包括盒子内容content和内边距padding, 不包括边框外边距和水平滚动条（只读）
scrollHeight: 实际的内容区域,包括边框、内、外边距。

wrapper: 父元素盒子
content: 父元素包裹的内容区域

滚动前：
在这里插入图片描述

滚动中：
在这里插入图片描述

滚动到底：
在这里插入图片描述

滚动到底满足的条件：

const dom = document.querySelectorAll('.wrapper');
 dom[0].scrollTop + dom[0].clientHeight === dom[0].scrollHeight

总图：
在这里插入图片描述

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <div class="content">
      <span>内容区域</span>
    </div>
  </div>
</body>
<script>
  // 父节点
  const dom = document.querySelectorAll('.wrapper')[0];
  // 子节点

</script>
<style>
  .wrapper {
    width: 200px;
    height:300px;
    padding: 10px;
    border: 1px solid gray;
    overflow: auto
  }
  .content {
    height: 600px;
    background-color: pink;
    border: 1px solid gray;
    margin-top: 400px;
  }
</style>
</html>

web界面展示：
在这里插入图片描述

归纳总结：

有滚动条的前提是内容区域的高度/宽度大于外层盒子；
滚动前，scrollTop是0，滚动到底的过程就是滚动内容区域的过程，将隐藏在可视区域外的实际内容区域区域滚动完，就滚动到底了，实际内容区域 - 可视区域 === 滚动到底时滚动的距离（scrollTop）
scrollHeight和clientHeight是固定值，在滚动过程中不会发生变化。

二. 判断dom元素是否在可视区域

getBoundingClientRect方法返回一个DOMRect对象，该对象包含了元素的位置和尺寸信息。DOMRect对象具有left、top、right、bottom、width、height等属性，可以用来计算元素在视口中的位置和大小。

检查dom元素是否在视口

 const rect = element.getBoundingClientRect();
 const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
 const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
 const inViewport = rect.top < viewportHeight && rect.bottom > 0 &&
   rect.left < viewportWidth && rect.right > 0;

总结：

getBoundingClientRect方法返回的top、left、bottom、right是相对于可视区域的视口中的位置，现以top和scrollTop来举例

比如：

top > 0  
// 说明dom元素还没到视口的顶部
 
0<top < clientHeight 
// 说明dom元素还没到视口的顶部,但是已经在可视区域了

top > clientHeight  
// 说明dom元素还没到视口的顶部,且不在可视区域了

top < 0
 
// 说明dom元素已经超过视口的顶部了。
// 要判断是否在可视区域，需要结合bottom值

要判断dom元素完全暴露在可视区域，需要结合getBoundingClientRect方法返回的top、bottom、left、right四个属性和可视属性来对比确定。

拓展：

scrollIntoView：将某个元素滚动到可视区域
比如代码

lastMessage.scrollIntoView({ behavior: 'smooth' })

lastMessage.scrollIntoView({ behavior: ‘smooth’ }); 这段代码用于将页面滚动到 lastMessage 这个元素上，并确保它可见在视口（viewport）中。

三. 总结

此篇文章主要是针对特定场景加深对scrollTop、clientHeight、scrollHeight、getBoundingClientRect()等属性的认识，实际场景以上的方案可能并非最佳，
比如

判断dom元素是否滚动到底，可以使用IntersectionObserver浏览器api.
其用法可参考往期文章：IntersectionObserver监听滚动事件

虚拟列表的最佳尝试可以使用requestAnimationFrame浏览器api，
其用法可参考往期文章：
requestAnimationFrame用法解析

念念不忘必有回响

关注

16
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
判断dom元素是否滚动到底、是否在可视区域

此篇文章主要是针对特定场景加深对scrollTop、clientHeight、scrollHeight、getBoundingClientRect()等属性的认识，实际场景以上的方案可能并非最佳，比如判断dom元素是否滚动到底，可以使用IntersectionObserver浏览器api.IntersectionObserver监听滚动事件虚拟列表的最佳尝试可以使用requestAnimationFrame浏览器api，requestAnimationFrame用法解析。
复制链接

扫一扫