console
const bottom = document.querySelector('.bottom')
const root = document.documentElement
console.log('offset top: ', bottom.offsetTop)
document.addEventListener('scroll', (e) => {
const value = bottom.offsetTop - root.scrollTop;
console.log('++ScrollTop: ', value > -bottom.offsetHeight && value < root.clientHeight)
bottom.getBoundingClientRect((rect) => {
const visble = rect.top > 0 && rect.bottom < rect.height
console.log('rect', visible)
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
</head>
<body>
<div class="list">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<div class="bottom">Bottom</div>
<div class="list">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
</body>
</html>
.list{
margin: 24px;
}
.item {
height: 100px;
border: 2px solid #444;
margin-bottom: 16px;
}
.bottom {
height: 100px;
background-color: #999;
margin: 24px;
}