【JS场景题】判断一个元素是否在可视区域内有哪些方法？

方法一、通过元素的位置信息和滚动条滚动的高度来判断

前置知识

clientWidth: 元素的内容区域宽度加上左右内边距宽度。
offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。
document.documentElement.clientHeight：获取视口高度（不包含滚动条的隐藏高度）。
document.documentElement.scrollHeight：获取浏览器窗口的总高度（包含滚动条的隐藏高度）。
document.documentElement.scrollTop: 获取滚动条滚动的高度

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.div {height: 2000px;}p {height: 200px;color: white;background-color: blueviolet;}</style>
</head>
<body><!-- 1. 通过元素的位置信息和滚动条滚动的高度来判断 --><div class="div"></div><p>我出现啦</p><script>javascript">function isContain(dom) {// 获取可视窗口的高度- 兼容写法const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;// 获取滚动条滚动的高度const scrollTop = document.documentElement.scrollTop;// 获取元素偏移的高度，就是距离可视窗口的偏移量const offsetTop = dom.offsetTop;return offsetTop - scrollTop <= screenHeight;}const p = document.querySelector('p')window.onscroll = () => {if (isContain(p)) {document.body.style.backgroundColor = 'blue'} else {document.body.style.backgroundColor = 'skyblue'}}</script>
</body>
</html>

方法二、通过getBoundingClientRect方法来获取元素的位置信息，然后加以判断

前置知识

getBoundingClientRect方法: DOM对象的一个方法，返回一个DOMRect对象。
详解：https://blog.csdn.net/weixin_61597234/article/details/134878221
如果想要判断子元素是否在可视区域内，只需要：
- top >= 0
- left >= 0
- bottom <= 视口高度
- right <= 视口宽度

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.div {height: 2000px;}p {height: 200px;color: white;background-color: blueviolet;}</style>
</head>
<body><!-- 2. 通过getBoundingClientRect方法来获取元素的位置信息，然后加以判断 --><div class="div"></div><p>我出现啦</p><script>javascript">function isContain(dom) {const totalHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;const totalWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;// 当滚动条滚动时，top、left、bottom、right时刻会发生改变const { top, right, bottom, left } = dom.getBoundingClientRect();return left >= 0 && top >= 0 && right <= totalWidth && bottom <= totalHeight;}const p = document.querySelector('p')window.onscroll = () => {if (isContain(p)) {document.body.style.backgroundColor = 'red'} else {document.body.style.backgroundColor = 'green'}}</script>
</body>
</html>

方法三、通过交叉检查器：Intersection Observer 来实现监听（推荐）

前置知识

MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.div {height: 2000px;}p {height: 200px;color: white;background-color: blueviolet;}</style>
</head>
<body><!-- 3. 通过交叉检查器：Intersection Observer 来实现监听 --><div class="div"></div><p>我出现啦</p><script>javascript">const p = document.querySelector('p')const observer = new IntersectionObserver(entries => {if (entries[0].isIntersecting) {document.body.style.backgroundColor = 'skyblue'} else {document.body.style.backgroundColor = 'orange'}}, {threshold: .2,  // 表示当子元素和父元素覆盖多少时触发回调函数。});observer.observe(p)</script>
</body>
</html>