判断一个元素是否在可视区域，我们常用的有三种办法：
元素距离body的offsetTop < 竖向滚动条距离 + 客户端高度 代表元素从底部出现在屏幕中元素距离body的offsetTop + 元素本身高度 > 竖向滚动条距离 代表元素将要向上消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: pink;
}
p {
width: 200px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem corporis nostrum saepe. Odit nulla debitis vitae fugiat maiores voluptatem quibusdam quod fugit labore, sequi repellendus ullam facilis dolores quam blanditiis aperiam ab modi quia cumque! Sit sequi cum dolore et, doloremque labore mollitia illum laborum sint ab. Deleniti soluta voluptatem dolorum officiis cumque nostrum aut nobis debitis magni adipisci, consectetur, ea modi ullam recusandae quia facilis officia consequatur temporibus necessitatibus eos mollitia commodi tempore consequuntur illum! Asperiores, repellat libero consequuntur cupiditate laudantium rerum porro deleniti facilis omnis? Repellat tenetur, beatae facere nostrum consequatur dicta sequi, et placeat qui maiores vel impedit iusto expedita, est eligendi dolor at delectus commodi perspiciatis! Odio dolore unde odit libero, illo hic deleniti numquam facilis nobis nam quo velit fugiat sunt doloribus suscipit inventore? Ducimus recusandae minima nostrum obcaecati vitae aliquid tenetur beatae dolores aliquam inventore aperiam tempora, quae et aut voluptas! Eveniet porro maiores corporis dignissimos minima reiciendis facere eius vel at vitae fugiat eaque est ipsam exercitationem consequatur, explicabo hic earum impedit, numquam aliquid voluptas laborum. Non tempore, corrupti totam animi ab iste reiciendis rem ad nihil commodi omnis sed tenetur sapiente, consequatur quo reprehenderit doloremque! Voluptas autem explicabo dolor laboriosam ipsa. Error esse atque neque cum, nulla rem expedita quis? Placeat perspiciatis, beatae amet ipsam fuga sint consectetur itaque facilis quas explicabo accusantium impedit expedita esse nisi vero. Velit alias ratione ex ad accusamus tempora iste repellendus molestiae nihil neque? Ad excepturi deleniti maxime similique commodi, pariatur sequi dolore reiciendis laboriosam consectetur ea aut facilis neque at quod mollitia maiores unde quas ullam reprehenderit quam laudantium, nam architecto magnam. Unde architecto iste expedita recusandae porro reprehenderit inventore? Odio inventore numquam quo qui natus repellat mollitia quam dolor dolorum dicta maiores deleniti quia error itaque autem, voluptatibus iste optio adipisci quidem tempora id asperiores? Aperiam libero illum harum sunt dolor minima, dolorem sint quo veritatis omnis at ad inventore exercitationem. Iusto, voluptatem ipsam praesentium atque aspernatur, placeat nostrum accusamus commodi deleniti quam et. Iure pariatur officia a voluptatem eos, ipsam cupiditate voluptatum asperiores aut et commodi velit odio ullam harum dolores fuga, nobis saepe odit soluta nam molestiae. Cupiditate eius voluptates veritatis voluptatum aliquam voluptas itaque pariatur. Voluptas ipsam corrupti dolores fuga sint vero veniam facere, eius fugiat delectus beatae iusto iure autem laboriosam accusantium! Ratione molestiae voluptas explicabo facilis repellendus quasi iure exercitationem repellat culpa unde placeat maiores dolorum modi rerum consequatur, sequi illo cumque cum cupiditate nostrum magnam esse dolores! Quaerat sed aut mollitia nemo necessitatibus praesentium nisi sapiente, quia enim, officia dolore! Consequuntur est officiis, ullam impedit totam tenetur corrupti assumenda itaque temporibus quis deleniti esse. Dolorem maxime omnis quos alias itaque repellendus dolorum recusandae dolor, voluptatum quis facere quaerat tempore quisquam ullam autem, aperiam repellat? Quasi vitae amet praesentium. Ullam nobis laborum recusandae placeat laudantium. Eos optio dolore sequi ipsum autem dolor tempore, delectus tenetur temporibus animi fugit dolorum omnis voluptas dolorem porro doloribus nulla! Expedita vitae, veritatis officia dolores ullam laboriosam, fugiat accusamus reprehenderit voluptates, quibusdam corrupti voluptatem.</p>
<div class="box"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem corporis nostrum saepe. Odit nulla debitis vitae fugiat maiores voluptatem quibusdam quod fugit labore, sequi repellendus ullam facilis dolores quam blanditiis aperiam ab modi quia cumque! Sit sequi cum dolore et, doloremque labore mollitia illum laborum sint ab. Deleniti soluta voluptatem dolorum officiis cumque nostrum aut nobis debitis magni adipisci, consectetur, ea modi ullam recusandae quia facilis officia consequatur temporibus necessitatibus eos mollitia commodi tempore consequuntur illum! Asperiores, repellat libero consequuntur cupiditate laudantium rerum porro deleniti facilis omnis? Repellat tenetur, beatae facere nostrum consequatur dicta sequi, et placeat qui maiores vel impedit iusto expedita, est eligendi dolor at delectus commodi perspiciatis! Odio dolore unde odit libero, illo hic deleniti numquam facilis nobis nam quo velit fugiat sunt doloribus suscipit inventore? Ducimus recusandae minima nostrum obcaecati vitae aliquid tenetur beatae dolores aliquam inventore aperiam tempora, quae et aut voluptas! Eveniet porro maiores corporis dignissimos minima reiciendis facere eius vel at vitae fugiat eaque est ipsam exercitationem consequatur, explicabo hic earum impedit, numquam aliquid voluptas laborum. Non tempore, corrupti totam animi ab iste reiciendis rem ad nihil commodi omnis sed tenetur sapiente, consequatur quo reprehenderit doloremque! Voluptas autem explicabo dolor laboriosam ipsa. Error esse atque neque cum, nulla rem expedita quis? Placeat perspiciatis, beatae amet ipsam fuga sint consectetur itaque facilis quas explicabo accusantium impedit expedita esse nisi vero. Velit alias ratione ex ad accusamus tempora iste repellendus molestiae nihil neque? Ad excepturi deleniti maxime similique commodi, pariatur sequi dolore reiciendis laboriosam consectetur ea aut facilis neque at quod mollitia maiores unde quas ullam reprehenderit quam laudantium, nam architecto magnam. Unde architecto iste expedita recusandae porro reprehenderit inventore? Odio inventore numquam quo qui natus repellat mollitia quam dolor dolorum dicta maiores deleniti quia error itaque autem, voluptatibus iste optio adipisci quidem tempora id asperiores? Aperiam libero illum harum sunt dolor minima, dolorem sint quo veritatis omnis at ad inventore exercitationem. Iusto, voluptatem ipsam praesentium atque aspernatur, placeat nostrum accusamus commodi deleniti quam et. Iure pariatur officia a voluptatem eos, ipsam cupiditate voluptatum asperiores aut et commodi velit odio ullam harum dolores fuga, nobis saepe odit soluta nam molestiae. Cupiditate eius voluptates veritatis voluptatum aliquam voluptas itaque pariatur. Voluptas ipsam corrupti dolores fuga sint vero veniam facere, eius fugiat delectus beatae iusto iure autem laboriosam accusantium! Ratione molestiae voluptas explicabo facilis repellendus quasi iure exercitationem repellat culpa unde placeat maiores dolorum modi rerum consequatur, sequi illo cumque cum cupiditate nostrum magnam esse dolores! Quaerat sed aut mollitia nemo necessitatibus praesentium nisi sapiente, quia enim, officia dolore! Consequuntur est officiis, ullam impedit totam tenetur corrupti assumenda itaque temporibus quis deleniti esse. Dolorem maxime omnis quos alias itaque repellendus dolorum recusandae dolor, voluptatum quis facere quaerat tempore quisquam ullam autem, aperiam repellat? Quasi vitae amet praesentium. Ullam nobis laborum recusandae placeat laudantium. Eos optio dolore sequi ipsum autem dolor tempore, delectus tenetur temporibus animi fugit dolorum omnis voluptas dolorem porro doloribus nulla! Expedita vitae, veritatis officia dolores ullam laboriosam, fugiat accusamus reprehenderit voluptates, quibusdam corrupti voluptatem.</p>
<script>
const box = document.getElementsByClassName('box')[0];
function getViewportSize() {
if (window.innerWidth) {
return {
width: window.innerWidth,
height: window.innerHeight
}
} else {
if (document.compatMode === 'BackCompat') {
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
}
function getScrollOffset() {
if (window.pageXOffset) {
return {
left: window.pageXOffset,
top: window.pageYOffset
}
} else {
return {
left: document.body.scrollLeft + document.documentElement.scrollLeft,
top: document.body.scrollTop + document.documentElement.scrollTop
}
}
}
function show(ele) {
// 元素距离body距离 < 滚动条距离顶部距离 + 浏览器高度 并且 元素距离body距离 + 自身高度 > 滚动条距离顶部距离
return ele.offsetTop < getScrollOffset().top + getViewportSize().height && ele.offsetTop + parseInt(ele.getBoundingClientRect().height) >= getScrollOffset().top
}
document.onscroll = function() {
console.log(show(box) ? '出现' : '消失');
}
</script>
</body>
</html>
返回值是一个 DOMRect对象，拥有left, top, right, bottom, x, y, width, 和 height属性
当页面发生滚动的时候，top与left属性值都会随之改变
如果一个元素在视窗之内的话，那么它一定满足下面四个条件：
实现代码如下：
function isInViewPort(element) {
const viewWidth = window.innerWidth || document.documentElement.clientWidth;
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
const {
top,
right,
bottom,
left,
} = element.getBoundingClientRect();
return (
top >= 0 &&
left >= 0 &&
right <= viewWidth &&
bottom <= viewHeight
);
}