脚本宝典收集整理的这篇文章主要介绍了解决HTML5中滚动到底部的事件问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
问题：在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计算高度
总结
以上所述是小编给大家介绍的解决HTML5中滚动到底部的事件问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本宝典网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上是脚本宝典为你收集整理的解决HTML5中滚动到底部的事件问题全部内容，希望文章能够帮你解决解决HTML5中滚动到底部的事件问题所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。