1.html页面:

<body onload="index_roll()">

...

</body>

2.js

<script type="application/javascript">

    //获取滚动条当前的位置

    function  getScrollTop() {

        var scrollTop = 0;

        if (document.documentElement && document.documentElement.scrollTop) {

            scrollTop = document.documentElement.scrollTop;

        }

        else if (document.body) {

            scrollTop = document.body.scrollTop;

        }

        return scrollTop;

    };

    //获取当前可是范围的高度

    function getClientHeight() {

        var clientHeight = 0;

        if (document.body.clientHeight && document.documentElement.clientHeight) {

            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);

        }

        else {

            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);

        }

        return clientHeight;

    };

    //获取文档完整的高度

    function  getScrollHeight() {

        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

    };

    var num=1;

    //滚动加载

    function index_roll(){

        window.addEventListener('scroll', function(){

            if (getScrollTop() + getClientHeight() >= (getScrollHeight()-10)) {

            //要执行的方法

          console.log("打印"+num);

          num++;

        }

    })

    }

</script>

H5 页面下拉加载更多的更多相关文章

  1. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

  2. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  3. jquery实现下拉加载更多

    下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...

  4. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  5. 微信小程序实现上拉和下拉加载更多

    在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...

  6. Windows Phone 8.1开发：如何让ListView下拉加载更多？

    Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...

  7. iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  8. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  9. JQ下拉加载更多

    <!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...

随机推荐

  1. Swift 里 Set（一）辅助类型

    _UnsafeBitset  是一个固定大小的 bitmap,用来确定指定位置是否有元素存在. HashTable  具体的 hash 碰撞算法在HashTable里实现,目前使用的是简单的开放地 ...

  2. info.plist的选项含义

    1.     Application does not run in background(鍵名:UIApplicationExistsOnSuspend)自從iOS4.0之後,當你在應用程式執行的時 ...

  3. Vim实用技巧系列 - tab和空格的转换

    有时候,我们会修改一些代码,而这些代码中的tab设定和我们自己的设定不一样.例如,我们自己的设定是以两个空格来代替tab,而要修改的代码则是使用tab.那么,我们应该怎样快速的将又有的tab转换为空格 ...

  4. Docker 之web api 访问 host sql server

    运行 Docker C:\Users\Administrator>docker run -it  -p 5000:5000 --name myapidocker1 webapiv1 root@3 ...

  5. 安装Centos7 随手记

    1.老笔记本安装Centos7 配置:酷睿I3  内存8G 2.原有系统Win7 将原来的硬盘空间,调整出60G 给Centos7 用. 3.安装Centos7 图形介面的,和windows安装过程类 ...

  6. vs 2017 IIS EXPRESS 增加局域网访问

    在VS调试站点,默认使用IISExpress,locall+端口,为了使用IP地址.多域名调试,找到 IISExpress下的applicationhost.config,在目标站点下增加类似行: & ...

  7. 【JAVA SPRING】IOC与AOP

    IOC(注入)有三种类型: 构造函数注入: 属性注入: 接口注入: JAVA反射: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法: 对于任意一个对象,都能够调用它的 ...

  8. dispatchEvent相关内容

    意思就是:手动触发事件. 我的理解是:类似于jquery中的trigger方法,可以在点击某个dom的时候,触发另一个dom的事件,下面一个我自己尝试的例子: <!DOCTYPE html> ...

  9. Vue + Element UI 实现权限管理系统 前端篇（二）：Vue + Element 案例

    导入项目 打开 Visual Studio Code,File --> add Folder to Workspace,导入我们的项目. 安装 Element 安装依赖 Element 是国内饿 ...

  10. 对html中iframe的研究

    虽然平时不怎么用iframe,但经常在网上听一些前辈说iframe怎样怎样,今天索性对iframe来个大研究,那样就不必去记那些条条框框了,自己体验一遍比看什么都好. 创建两个文件一个index.ht ...