offsetTop
，元素的上外边框至包含元素的上内边框之间的像素距离。
// 元素的偏移量不会随着滚动条的滚动而发生改变。并且是相对于定位父元素的位置计算的。如果没有定位的父元素就获取的是到窗口的距离，从元素的外边框计算到父元素的内边框
document.documentElement.scrollHeight
： 获取浏览器窗口的总高度
。包括滚动条的隐藏高度。
,如果没有滚动条，则他就等于
document.documentElement.clientWidth
。
document.documentElement.clientWidth
：获取视口宽度。就是浏览器窗口的宽度。
getBoundingClientRect()
返回元素的大小及其相对于视口的位置。
这里获取的大小包括边框，内容和内边距。
获取相对于视口的位置时，都是视口到外边框的距离。
document.documentElement.scrollTop：获取滚动条滚动的高度。
这个值是可以设置的。
了解了上面的一些属性，我们就可以学习第一种判断方法了
通过元素的位置信息和滚动条滚动的高度来判断了
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;
通过getBoundingClientRect方法来获取元素的位置信息，然后加以判断(这种方法是我之前没有见过的)
首先来介绍一下getBoundingClientRect方法。
他是dom对象的一个方法。返回一个DOMRect对象。该对象拥有left, top, right, bottom, x, y, width, 和 height属性。
当页面发生滚动的时候，top, left, right, bottom属性值都会随之改变。
top：就是元素上外边框到视口顶端距离。
left：就是元素左外边框到视口左端距离。
bottom：就是元素下外边框到视口顶端距离。
right：就是元素右外边框到视口左端距离。
如果想要判断子元素是否在可视区域内，只需要：
top 大于等于 0
left 大于等于 0
bottom 小于等于视窗高度
right 小于等于视窗宽度
function isContain(dom) {
const totalHeight = window.innerHeight || document.documentElement.clientHeight;
const totalWidth = window.innerWidth || document.documentElement.clientWidth;
const { top, right, bottom, left } = dom.getBoundingClientRect();
return (top >= 0 && left >= 0 && right <= totalWidth && bottom <= totalHeight);
通过webAPI，Intersection Observer来实现监听。
详细讲解，可以参考mdn：developer.mozilla.org/zh-CN/docs/…
Intersection Observer API 会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时(或者 viewport)，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。
const options = {
root:
rootMargin: "上右下左"
threshold:
const observer = new IntersectionObserver((entries) => {
}, options)
observer.observe(dom);
下面就是三种方法判断的例子了
该例子就是如果子元素没有显示在当前可是窗口中时，窗口的背景颜色显示为绿色，反之显示为蓝色。
<style>
.div {
height: 2000px;
height: 200px;
background: red;
</style>
<div class="div"></div>
<p id="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.getElementById("p");
window.onscroll = () => {
if (isContain(p)) {
document.body.style.backgroundColor = 'blue'
} else {
document.body.style.backgroundColor = 'green'
</script>
<script>
function isContain(dom) {
const totalHeight = window.innerHeight || document.documentElement.clientHeight;
const totalWidth = window.innerWidth || document.documentElement.clientWidth;
const { top, right, bottom, left } = dom.getBoundingClientRect();
console.log(top, right, bottom, left)
return (top >= 0 && left >= 0 && right <= totalWidth && bottom <= totalHeight);
const p = document.getElementById("p");
window.onscroll = () => {
if (isContain(p)) {
document.body.style.backgroundColor = 'blue'
} else {
document.body.style.backgroundColor = 'green'
</script>
<script>
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
document.body.style.backgroundColor = "blue"
} else {
document.body.style.backgroundColor = "green"
}, { threshold: .2 });
const p = document.getElementById("p")
observer.observe(p)
</script>
</body>
