处理HTML5中翻转究竟部的恶性事件难题

日期:2021-02-22 类型:科技新闻 

关键词:小程序和公众号区别,小程序生成二维码,小程序前端框架,小程序开发商排名,小程序码

难题:在H5中,大家有这样的要求:比如有目录的情况下,翻转究竟部时,必须载入更多。

处理计划方案:能够选用window的翻转恶性事件开展解决

剖析:假如翻转是对于全部显示屏而言的(不对于于某个页面小块),那末这个应当是是创立的:显示屏的高宽比+最大翻转的间距 = 內容的高宽比

编码完成:

 

<html> 
    <head> 
    <meta charset="UTF⑻">
        <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;
     //+⑸是以便确保1定的延展性,并不是要恰好相同才考虑,
    if(height⑸<=scrollTop+clientHeight&&scrollTop+clientHeight<=height+5){
      console.log('监视取得成功','抵达底部')
    }
    }
    }
    </script>
</html>

编码的有关表明:许多情况下,目录载入,大家不可以够把装载子元素的父器皿高宽比设死,此时选用style设定为auto时,element.style.height也会等于auto ,提议选用clientHeight或运用测算款式 getComputedStyle测算高宽比

总结

以上所述是网编给大伙儿详细介绍的处理HTML5中翻转究竟部的恶性事件难题,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!