js宽高的加载关系
2019-04-24 本文已影响0人
阳光之城alt
image.png
image.png
1可视区域加载>第2屏加载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="cs">
<div id="mm" class="sh ">sss</div>
</div>
ss
<script type="text/javascript">
function sc(){
var sc=document.getElementById("cs")
var mm=document.getElementById("mm")
var clients=innerHeight||document.documentElement.clientHeight||document.body.clientHeight
var divtop=sc.getBoundingClientRect().top
console.log(clients,divtop)
if(divtop<=clients){
mm.classList.remove("sh")
console.log("pppp")
}
}
window.onscroll=sc
</script>
<style>
#cs{width: 500px;height: 350px;background: deepskyblue;margin: 1000px 0 auto 0;}
#mm{display: none;}
.sh{display: none;}
</style>
</body>
</html>
2页面滚动到顶部和底部 按需加载
image.png
3 div元素
image.png
4计算滚动轴宽度
image.png
