方法一、通過元素的位置信息和滾動條滾動的高度來判斷
前置知識
- 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>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>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>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>
申請的字典的類型是什么？)
存在被濫用的風險)
