项目的一个前端页面展示已购买商品时，要求能下拉加载更多。花了点时间研究这个功能，以前没做过。

首先需要给div加scroll事件，监听滚动条滚动动作。那何时触发加载动作呢？当滚动条滚到底的时候。如何判断滚动条滚到底呢？

当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时，说明滚动条到底部了。公式如下。

  1. this.scrollHeight <= $(this).scrollTop() + $(this).height()

给出一个能跑的demo，需要引入jquery。

  1. <!DOCTYPE=html>
  2. <html>
  3. <head>
  4. <script src="jquery.js" type="text/javascript"></script>
  5. </head>
  6. <body>
  7. <div>下拉加载更多</div>
  8. <div class="main" style="height:700px;overflow:auto;">
  9. <div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:800px' ></div>
  10. </div>
  11. </body>
  12. <script  type="text/javascript">
  13. $(document).ready(function(){
  14. $(".main").unbind("scroll").bind("scroll", function(e){
  15. var sum = this.scrollHeight;
  16. if (sum <= $(this).scrollTop() + $(this).height()) {
  17. $(".main").append($(".child").clone());
  18. }
  19. });
  20. });
  21. </script>
  22. </html>

如果等滚动条拉到底部时再加载，会影响用户体验。因为一般动态加载的时候都需要向服务端请求资源，这时需要时间。一个更佳的方式是，当滚动条距离底部一定距离（C）时，就动态加载更多，向服务端请求资源。也就是预加载，预读取。公式如下。

  1. this.scrollHeight - C <= $(this).scrollTop() + $(this).height()

一个js功能，最后发现其实是个数学问题。最开始看同事写的类似功能的代码式，十分繁琐。当自己总结完这个公式后，思路立刻清晰了。透过现象看本质。

下拉加载更多DEMO(js实现)的更多相关文章

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

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

  2. dropload.js下拉加载更多

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

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

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

  4. jquery实现下拉加载更多

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

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

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

  6. JQ下拉加载更多

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

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

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

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

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

  9. 集成iscroll 下拉加载更多 jquery插件

    一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...

随机推荐

  1. cmd如何进入d盘

    首先打开CMD 点开始 运行输入 CMD 在CMD窗口中输入 CD\(就是返回根目录) 回车 在输入 D: 即可在D盘操作状态

  2. 通过 sysprocesses 简单查询死锁及解决死锁办法

    简单查询死锁,如下四步可以轻松解决: 第一步:查询死锁语句 1: 条件是 blocked <> 0 select dbid,* from sys.sysprocesseswhere 1=1 ...

  3. .NET MVC 学习笔记（四）— 基于Bootstarp自定义弹出框

    .NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...

  4. 关于错误 openssl/ssl.h：没有那个文件或目录的解决办法

    原文链接:https://blog.csdn.net/kulala082/article/details/68484314 首先得安装openssl:sudo apt-get install open ...

  5. django 中 Oauth2 实现第三方登陆

    django 中 Oauth2 实现第三方登陆 python网站第三方登录,social-auth-app-django模块, social-auth-app-django模块是专门用于Django的 ...

  6. 14_python 匿名函数，递归函数

    一.匿名函数 语法: 函数名 = lambda 参数: 返回值    # lambda x,y,z=1:x+y+z 注意: 1.函数的参数可以有多个. 多个参数之间⽤逗号隔开  2.匿名函数不管多复杂 ...

  7. Ubuntu 16.04下安装golang

    手动安装 下载golang安装包 https://studygolang.com/dl 从上面的网站上下载适合自己机器的go版本,我这里选择的是go1.10.linux-386.tar.gz 解压安装 ...

  8. 利用koa打造restful API

    概述 最近学习利用koa搭建API接口,小有所得,现在记录下来,供以后开发时参考,相信对其他人也有用. 就目前我所知道的而言,API有2种,一种是jsonp这种API,前端通过ajax来进行跨域请求获 ...

  9. alembic教程

    安装 pip install alembic 步骤 1.初始化 alembic 仓库 在终端中, cd 到你的项目目录中,然后执行命令 alembic init alembic ,创建一个名叫 ale ...

  10. c++实现二叉树层序、前序创建二叉树，递归非递归实现二叉树遍历

    #include <iostream> #include <cstdio> #include <stdio.h> #include <string> # ...