IE,Firefox3+,Safari4+,Opera9.5,及Chrome都提供了一个getBoundingClientRect(),,这个方法会返回一个矩形对象。包函四个属性,left,top,right,bottom,分别表示元素在页面中相对于视口的位置。这里需要注意的是,right值是元素的right边界相对于视口左边界的长度值。
以下是元素全部在视口中可见的函数,亲测有效
function inViewPort(el) {
let doc = document.documentElement
let rect = el.getBoundingClientRect()
let top = rect.top
let bottom = rect.bottom
let left = rect.left
let right = rect.right
if(top>0&&bottom<doc.clientHeight&&left>0&&right<doc.clientWidth){
return true
}else{
return false
}
}
以下是元素部分在视口中
function inViewPort(el) {
let doc = document.documentElement
let rect = el.getBoundingClientRect()
let top = rect.top
let bottom = rect.bottom
let left = rect.left
let right = rect.right
if(top>0&&top<doc.clientHeight&&left>0&&left<doc.clientWidth){
return true
}else{
return false
}
}