H5中滚动到底部的事件
问题：
在H5中，我们有这样的需求：例如有列表的时候，滚动到底部时，需要加载更多。
解决方案：
可以采用window的滚动事件进行处理
分析：
如果滚动是针对整个屏幕而言的（不针对于某个界面小块），那么这个应该是是成立的：屏幕的高度+最大滚动的距离 = 内容的高度
代码实现：
<html>
<head>
<meta charset="UTF-8">
<title>监听滚动到底部滚动底部</title>
<style>
.div2 {
width: 100px;
height: 100px;
border: 1px solid red
}
* {
margin: 0
}
.button1:active {
background: red
}
body {
height: 375px;
width: 667px;
border: 1px solid red
}
.div1 {
height: 600px;
width: 100%;
background: red
}
.div2 {
height: 600px;
width: 100%;
background: green
}
.div3 {
height: 600px;
width: 100%;
background: blue
}
.div4 {
height: 600px;
width: 100%;
background: yellow
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>
</body>
<script>
window.onload = function() {
//获取容器父元素
var div0 = document.getElementsByClassName('div0')[0];
//height 计算属性的高度
var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', ''));
console.log(height, "div0的计算高度")
window.onscroll = function() {
/*
scrollTop 为滚动条顶端距离界面右上角的距离，这里采用了兼容性写法
*/
let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
//+-5是为了保证一定的弹性，并非要刚好相等才出发，
if(height - 5 <= scrollTop + clientHeight && scrollTop + clientHeight <= height + 5) {
console.log('监听成功', '到达底部')
}
}
}
</script>
</html>代码的相关说明：很多时候，列表加载，我们不能够把装载子元素的父容器高度设死，此时采用style设置为auto时，element.style.height也会等于auto ，建议采用clientHeight或者利用计算样式 getComputedStyle计算高度
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
