滚动加载
2020-05-30 本文已影响0人
冷暖自知_zjz
滚动加载
// 判定元素是否滚动到底(滚动可视区域高度 + 当前滚动位置 === 整个滚动高度)
scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight
// 返回顶部
scrollDom.scrollTop = 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
#scrollBox {
height: 200px;
width: 200px;
border: 1px solid #ccc;
overflow: auto;
}
#scrollBox div{
text-align: center;
}
</style>
</head>
<body>
<div id="scrollBox">
</div>
<button class="back-btn">返回顶部</button>
<script>
let len = 100
let scrollDom = document.querySelector('#scrollBox')
let backBtn = document.querySelector('.back-btn')
function createList () {
const fragment = document.createDocumentFragment()
for(let i = 0; i< len; i++){
const div = document.createElement('div')
div.innerText = i
fragment.appendChild(div)
}
scrollDom.appendChild(fragment)
}
createList();
scrollDom.onscroll = function(){
if(scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight){
console.log("已经滚动到底了！！！")
// alert("已经滚动到底了！！！")
}
}
backBtn.onclick = function(){
scrollBox.scrollTop = 0
}
</script>
</body>
</html>
