话不多说先上代码

$(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. TextView和EditText中添加图片(ImageSpan)

    编辑框中加图片,以前一直以为很复杂,后来发现android有些类已经很好的实现了这些功能. 代码如下: [java] view plaincopy mSubjectDetailView = (Text ...

  2. wpf控件设计时支持(1)

    原文:wpf控件设计时支持(1) 这部分内容几乎是大家忽略的内容,我想还是来介绍一下. 本篇源码下载 1.属性元数据 在vs IDE中,在asp.net,winfrom等开发环境下,右侧的Proper ...

  3. 在efcore 中创建类 通过实现IEntityTypeConfiguration<T>接口 实现实体类的伙伴类 实现FluentApi

    1 创建实体类: public partial class NewsCategory : IAggregationRoot { public NewsCategory() { } public Gui ...

  4. 用WPF实现打印及打印预览

    原文:用WPF实现打印及打印预览 应该说,WPF极大地简化了我们的打印输出工作,想过去使用VC++做开发的时候,打印及预览可是一件极麻烦的事情,而现在我不会再使用C++来做Windows的桌面应用了- ...

  5. 整型转字符串(convert int to char)优化实践——一个意外的BUG

    convert_int_to_char函数在使用时出现过一个BUG. 当使用值是13200020099时,返回的字符串是"13200020111",结果是错误的. 在gcc编译器里 ...

  6. VLC-FM PLAYLIST

    VLC-FM-PLAYLIST.xspf <?xml version="1.0" encoding="UTF-8"?> <playlist x ...

  7. WPF VisualTreeHelper的使用

    <Window x:Class="MyWpf.MainWindow"        xmlns="http://schemas.microsoft.com/winf ...

  8. 待修 Bug

    # 乱码 ## 描述 环境:Tomcat 8 + Spring 4 + Spring Security. 问题描述: 在类 AbstractAnnotationConfigDispatcherServ ...

  9. VC++ 使用预编译头

    一.使用默认的预编译头       要使用预编译头,我们必须指定一个头文件,这个头文件包含我们不会经常改变的代码和其他的头文件,然后我们用这个头文件来生成一个预编译头文件(.pch文件),想必大家都知 ...

  10. OC笔记一:Objective

    1.OC简介 全称:Objective-C,是扩充C的面向对象编程语言,主要用于iOS和Mac OS开发. C语言的基础上,增加了一层最小的面向对象语法 完全兼容C语言 可以在OC代码中混入C语言代码 ...