<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
}
.mains {
width: 100%;
height: 100%;
padding: 0 20px;
text-align: center;
box-sizing: border-box;
}
#aa div {
line-height: 300px;
font-size: 30px;
font-weight: 700;
border-bottom: 1px solid aqua;
}
#aa div:last-child{
border: 0;
}
</style>
<body>
<div class="mains">
<div id='aa'></div>
</div>
<script type="text/javascript">
window.onload = function() {
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let html = ""
for (let i = 0; i < data.length; i++) {
// html += '<h4>' + data[i] + '</h4>'
html+=`<div>${data[i]}</div>`
}
document.getElementById('aa').innerHTML = html;
}
let aa = document.getElementById('aa')
window.onscroll = function(e) {
console.log('-------------------------')
console.log(document.body.clientHeight)
console.log(window.scrollY)
console.log(aa.scrollHeight)
console.log(aa.scrollHeight - document.body.clientHeight - window.scrollY)
}
</script>
</body>
</html>