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>
  • 相关阅读:
    MySQL的FORMAT函数用法规则
    jetbrains idea/webstorm等(注册,激活,破解码,一起支持正版,最新可用)(2017.3.16更新)【转】
    用户价值模型 CITE :https://www.jianshu.com/p/34199b13ffbc
    用户生命周期模型
    机器学习十大常用算法(CITE 不会停的蜗牛 ) interesting
    Linux 安装Oracle11g完整安装图文教程另附基本操作 (分享)
    oracle 命中率
    SQL学习总结笔记
    hash join
    Tomcat详细安装配置
  • 原文地址:https://www.cnblogs.com/itliulei/p/9968347.html
Copyright © 2011-2022 走看看