SOURCE

console 命令行工具 X clear

                    
>
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;

}