您的位置:首页 > Web前端 > > 正文

html5横向滚动(解决HTML5中滚动到底部的事件问题)

更多 时间:2021-10-02 01:33:19 类别:Web前端 浏览量:314

html5横向滚动

解决HTML5中滚动到底部的事件问题

问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。

解决方案:可以采用window的滚动事件进行处理

分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的:屏幕的高度+最大滚动的距离 = 内容的高度

代码实现:

  • <html> 
        <head> 
        <meta charset="UTF-8">
            <title>监听滚动到底部滚动底部</title> 
            <style> 
    .li2{
    width:100px;
    height:100px;
    border:1px solid red
    }
    *{
    margin:0
    }
    .button1:active{
       background:red
    }
    body{
    height:375px;
    width:667px;
    border:1px solid red
    }
    .li1{
    height:600px;
    width:100%;
    background:red
    }
    .li2{
    height:600px;
    width:100%;
    background:green
    }
    .li3{
    height:600px;
    width:100%;
    background:blue
    }
    .li4{
    height:600px;
    width:100%;
    background:yellow
    }
            </style> 
        </head> 
        <body > 
        <li class="li0">
        <li class="li1"></li>
        <li class="li2"></li>
        <li class="li3"></li>
        <li class="li4"></li>
        <li class="li5"></li>
        </li>
        </body> 
        <script>
        window.onload = function(){
      //获取容器父元素
        var li0 = document.getElementsByClassName('li0')[0];
        //height 计算属性的高度
        var height = parseInt((window.getComputedStyle(li0, null).height).replace('px', ''));
        console.log(height,"li0的计算高度")
        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 滚动 底部