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>
  • 相关阅读:
    EF Code First一对一、一对多、多对多关联关系配置
    ASP.NET Core 运行原理剖析2:Startup 和 Middleware(中间件)
    ASP.NET Core 运行原理剖析1:初始化WebApp模版并运行
    ASP.NET Core 1.0 入门——Application Startup¶
    ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求
    EF Code First 学习笔记:约定配置
    ASPNET CORE初探
    EntityFramework 7.0之初探【基于VS 2015】(
    ASP.NET Core 开发
    sqlite3 外键作用原理和使用方法
  • 原文地址:https://www.cnblogs.com/itliulei/p/9968347.html
Copyright © 2011-2022 走看看