话不多说先上代码

$(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. npm与cnpm混用导致的问题

    npm和cnpm混用之后,再用npm升级模块导致如下错误: 解决办法: 删除node_modules文件下的文件后,重新执行npm install

  2. Visual C# 2010 实现资源管理器

    演练:使用设计器创建带有 ListView 和 TreeView 控件的资源管理器样式的界面 Visual Studio 2010     其他版本     此主题尚未评级 - 评价此主题   Vis ...

  3. WPF 画线动画效果实现

    原文:WPF 画线动画效果实现 弄了将近三天才搞定的,真是艰辛的实现. 看了很多博客,都太高深了,而且想要实现的功能都太强大了,结果基础部分一直实现不了,郁闷啊~ 千辛万苦终于找到了一个Demo,打开 ...

  4. JQuery采纳CSS实现DOM显示和隐藏要素

    今天参加了Code Review活动.阅读编写代码的同事,感到满足当前功能的实现,但是从长远来看,,无论角度还是从代码重用是来看显然不佳维修点. 有什么需要看的权利.通过选择不同的选项下拉框需求,为了 ...

  5. 【v2.x OGE课程 15】 布局相关

    1.父亲和儿子的关系 我们可以Entity类看到非常多parent(父)与child(子)这种字眼,这是游戏引擎中常有的概念,简单而言是一种has-a的关系 watermark/2/text/aHR0 ...

  6. nginx+tomcat反向代理

    第一步:编辑nginx的配置文件 #服务转发一 upstream tomcat8080{ server 192.168.1.6:8080; } #服务转发二 upstream tomcat8081{ ...

  7. WPF 创建无边框的圆角窗口

    原文:WPF 创建无边框的圆角窗口 如题所述,在WPF中要创建一个没有边框且为圆角的窗体,有如下几步工作要进行: 第一步:去掉窗体默认样式的边框 首先将窗体的背景设为透明,将允许透明的属性设置为Tru ...

  8. 在WPF中减少逻辑与UI元素的耦合

    原文:在WPF中减少逻辑与UI元素的耦合             在WPF中减少逻辑与UI元素的耦合 周银辉 1,    避免在逻辑中引用界面元素,别把后台数据强加给UI  一个糟糕的案例 比如说主界 ...

  9. 图像滤镜艺术---保留细节的磨皮滤镜之PS实现

    原文:图像滤镜艺术---保留细节的磨皮滤镜之PS实现 目前,对于人物照片磨皮滤镜,相信大家没用过也听过吧,这个滤镜的实现方法是多种多样,有难有简,有好有差,本人经过长时间的总结,得出了一种最简单,效果 ...

  10. Win8Metro(C#)数字图像处理--2.16图像浮雕效果

    原文:Win8Metro(C#)数字图像处理--2.16图像浮雕效果  [函数名称] 图像浮雕效果函数ReliefProcess(WriteableBitmap src) [函数代码]       ...