话不多说先上代码

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop(); //滚动高度
    var windowHeight = $(this).height(); //可见高度
    var scrollHeight = $(document).height(); //内容高度  
    if(scrollTop + windowHeight >= scrollHeight) {
        // 此处写滚动条到底部时候触发的事件
       for(var i = 0; i <= 10; i++) {
        $("#news").append(html1);
       }
    }
 });
这是一段jQuery函数:
(1)首先获取滚动高度,即这个滚轮最开始所在位置,如果没有划过的话默认是0
(2)其次获取可见高度,即屏幕高度,也就是显示屏的高度
(3)接着获取内容的高度也就是你已经加载出来的页面的高度,可能比屏幕大也可能与屏幕相等,取决于你页面中的代码所能展示的高度
(4)最后当你的滚动高度+可见高度>=内容高度,即滚轮的位置+屏幕高度>=你已经加载的页面底部时,触发你要加载的内容
 

如何使用jQuery可以让滚轮滚到底部可以自动加载所需内容的更多相关文章

  1. jquery实现滚动到页面底部时无限加载内容的代码

    var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关,防止多次调用事件 $(window).scrol ...

  2. Layman H5+Webapp+MUI App 页面滑至到底部自动加载新的内容

    要点:使用jquery的scroll()方法实现,当用户滚动指定的元素时,会发生 scroll 事件 scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口) scroll() 方 ...

  3. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  4. jQuery自动加载更多程序

    1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...

  5. jQuery自动加载更多程序(转)

    jQuery自动加载更多程序   1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...

  6. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  7. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  8. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  9. 利用Jquery的load函数实现页面的动态加载

    利用Jquery的load函数实现页面的动态加载  js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...

随机推荐

  1. Android二维码功能实现

    最近二维码真是越来越火了,随便电视上.网络上.商场里,到处都是二维码.而内嵌二维码扫描功能的软件也越来越多,QQ.微信.UC浏览器等等应用都可以对着二维码扫一扫,感觉我们自己的应用里不加上二维码扫描功 ...

  2. 微信公众平台消息接口开发(31)微信浏览器HTTP_USER_AGENT判断

    微信公众平台开发 微信公众平台开发者 微信公众平台开发模式 微信浏览器 HTTP_USER_AGENT作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/archiv ...

  3. DDD实战4 实现产品仓储

    a.要实现仓储,首先要定义仓储接口.在领域层定义仓储接口,IProductRepository.cs. public interface IProductRepository { void Creat ...

  4. Emoji:搜索将与您找到表情符号背后的故事

    眼下.秉已经开始支持emoji搜索,这意味着,你可以插入或粘贴系列emoji表情,让我们的爱.微笑.食品等..些表情随意组合,必应总会带给你非常多有趣的但却没有不论什么实际用途的搜索结果. 这是一项非 ...

  5. NS2网络模拟(3)-吞吐率

    1: #NS2_有线部分\Throughput.awk 2: 3: BEGIN { 4: #Initialize the variable 5: init = 0; 6: i = 0; 7: } 8: ...

  6. Apache和Tomcat的整合

    1.web架构 首先上图,解释web通用架构 通常情况下分为三大块 : ★ Web server :  通常情况下由 Apache Http Server  . IBM Http Server  .I ...

  7. C# WPF报表打印

    前天我的一个同学由于打印报表而苦恼,所以就介绍了一下WPF的打印报表,希望能帮助到大家. 展示报表 1. 首先新建项“报表”,选定项目,右击,点击“添加”->“新建项”->“报表”

  8. bigdata_ Kafka集群模式部署

    环境:kafka 0.8.1.1 基本概念 Kafka维护按类区分的消息,称为主题(topic) 生产者(producer)向kafka的主题发布消息 消费者(consumer)向主题注册,并且接收发 ...

  9. 各linux版本重启apache命令

    各linux版本重启apache命令 Slackware Linux命令: /etc/rc.d/rc.httpd restart ubuntu.Debian 系统命令: /etc/init.d/apa ...

  10. glibc 内存申请和释放及堆连续检查

    C语言有两种内存申请方式: 1.静态申请:当你声明全局或静态变量的时候,会用到静态申请内存.静态申请的内存有固定的空间大小.空间只在程序开始的时候申请一次,并且不再释放(除非程序结束). 2.自动申请 ...