网页滚动到顶部或底部加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
body{
width:100%;
height:2000px;
position:relative;
}
div{
width:500px;
height:500px;
border:1px solid red;
background: red;
position:absolute;
}
</style>
<script>
function scroll(){
var client=document.documentElement.clientHeight||window.innerHeight||document.body.clientHeight;//元素的高度==$(window).height()
var scrollTop=document.body.scrollTop;//被卷上去的部分==$(window).scrollTop()/$(body).scrollTop()
var wholeHeight=document.body.scrollHeight;//元素内容的高度==$(document).height()
if(client+scrollTop>=wholeHeight){
var div=document.getElementsByTagName("div")[0];
div.style.transition="3s";
div.style.transform="translate(500px,1500px)";//平移是相对元素当前位置进行移动 sLeft = div.style.transform ? -parseInt(/\d+/.exec(div.style.transform)[0]) : 0;获取元素的位移值
console.log("已经滚动到底部")
}else if(scrollTop==0){
var div=document.getElementsByTagName("div")[0];
div.style.transition="3s";
div.style.transform="translate(0px,0px)";//平移是相对元素当前位置进行移动
console.log("已经滚动到顶部")
}
}
window.onscroll=scroll;
</script>
</head>
<body>
<div></div>
</body>
</html>
