zoukankan      html  css  js  c++  java
  • 滚动加载

    $(window).scroll(function(){

    var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
    var scrollHeight = $(document).height(); //当前页面的总高度
    var clientHeight = $(this).height(); //当前可视的页面高度
    // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
    if(scrollTop + clientHeight >= scrollHeight){ //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
    //滚动条到达底部
    alert(3)
    }else if(scrollTop<=0){
    //滚动条到达顶部
    alert(4)
    //滚动条距离顶部的高度小于等于0 TODO

    }
    });

    var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var ofs = $(".weui-tabbar").offset().top
    if (ofs - scrollTop - window.innerHeight - 100 < 0) {
    console.log(10);
    if (loadding) return;
    loadding = true;
    loadData()
    }


    <script type="text/javascript">
        //获取列表中的原有内容
        var content=document.getElementById("img").innerHTML;
        //每被调用一次,就将网页原有内容添加一份,这个大家可以写自己要加载的内容或指令
        function addLi(){
            document.getElementById("img").innerHTML+=content;
        }
        /*
         * 监听滚动条,本来不想用jQuery但是发现js里面监听滚动条的事件不好添加,这边就引用了Jquery的$(obj).scroll();这个方法了
         */
        $(window).scroll(function(){
            //下面这句主要是获取网页的总高度,主要是考虑兼容性所以把Ie支持的documentElement也写了,这个方法至少支持IE8
            var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
            //clientHeight是网页在浏览器中的可视高度,
            var clientHeight=document.body.clientHeight||document.documentElement.clientHeight;
            //scrollTop是浏览器滚动条的top位置,
            var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
            //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容;
            if(scrollTop+clientHeight==htmlHeight){
                addLi();
            }
        })
    </script>
  • 相关阅读:
    [JSOI2008]最小生成树计数
    [SCOI2009]windy数
    Sql Server 存储过程
    Sql Server 表操作
    .NET WebService中使用 Session
    从头入手jenkins
    swiftlint 你所要知道的所有!!
    swiftlint swift代码规范检查神器
    使用RxSwift 实现登录页面的条件绑定
    iOS 设置不同环境下的配置 Debug Release 生产 测试 等等
  • 原文地址:https://www.cnblogs.com/itliulei/p/9968347.html
Copyright © 2011-2022 走看看