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

概览

我们日常开发中，在面对懒加载、虚拟列表需求时，经常需要判断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用法解析

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/17428.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！