Determine if an element is in the visible area

[xiao-ice]

Determine if an element is in the visible area

[hixb]

Determine if an element is in the visible area

`
// html

body {
height: 3000px;
width: 3000px;
}

#box {
width: 300px;
height: 300px;
background-color: red;
margin-top: 300px;
margin-left: 300px;
}

// js

const box = document.getElementById('box')
window.onscroll = function () {
// box完整出现在视口里才会输出true，否则为false
console.log(checkInView(box))
}

function checkInView(dom) {
const { top, left, bottom, right } = dom.getBoundingClientRect()
console.log(top, left, bottom, right)
console.log(window.innerHeight, window.innerWidth)
return top >= 0 &&
left >= 0 &&
bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
right <= (window.innerWidth || document.documentElement.clientWidth)
}
`