HTML5中滚动到底部的事件如何解决？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
代码实现：
<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(){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中滚动到底部的事件如何解决问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。
