如图,图片或div随着滚动条的滚动进入视口在离开
要判断div是否通过视口,可以通过js getBoundingClientRect来获取div距离视口的top bottom left right
为了兼容IE getBoundingClientRect的两个像素之差:
function GetRect (element) {
var rect = element.getBoundingClientRect();
var top = !!document.documentElement.clientTop?document.documentElement.clientTop:0;
var left= !!document.documentElement.clientLeft?document.documentElement.clientLeft:0;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
所有代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
background: #ccc;
width: 500px;
height: 400px;
margin-top: 1000px;
margin-left: auto;
margin-right: auto;
}
.box1{
width: 100px;
height: 1000px;
margin-top: 100px;
background: #fff;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<div class="box1"></div>
<script>
(function(){
function GetRect (element) {
var rect = element.getBoundingClientRect();
var top = !!document.documentElement.clientTop?document.documentElement.clientTop:0;
var left= !!document.documentElement.clientLeft?document.documentElement.clientLeft:0;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
var $box = document.getElementById("box");
var divH = $box.offsetHeight; //div高度
var windowH = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight; //浏览器高度兼容写法
window.onscroll = function(){
var obj = GetRect($box);
var check = obj.bottom-obj.top;
if(obj.top >= windowH){ //在视口之下
console.log("视口之下")
}
if(obj.top < windowH && obj.bottom >= windowH){ //正在出现
console.log("正在出现")
}
if(obj.top > 0 && obj.top < windowH && obj.bottom > 0 && obj.bottom < windowH){ //正在视口中
console.log("正在视口中")
}
if(obj.top <= 0 && obj.bottom <= divH && obj.bottom >0){ //正在离开视口
console.log("正在离开视口")
}
if(obj.bottom <= 0){ //已经离开视口
console.log("已经离开视口")
}
};
})()
</script>
</body>
</html>
效果: