话不多说先上代码

$(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. win7 64位系统下进入debug

    win7 64位无法直接通过命名行输入debug命令的方式进入到debug,好在我们可是使用一个工具DOSbox来进入debug.操作步骤如下:1.下载DOSbox进行安装.下载地址:点击打开链接.如 ...

  2. JScript分割字符串

    作者:朱金灿 来源:http://blog.csdn.net/clever101 不废话了,直接用代码说明吧: try { var ss = new Array(); var str="12 ...

  3. WPF依赖属性(续)(1)

    原文:WPF依赖属性(续)(1)                 之前有写过几篇文章,详细地介绍了依赖属性的基本使用方法,如果你不想了解其内部实现机制的话,那么通过那两篇文章的介绍,足以应付平时的应用 ...

  4. wpf无边框窗体移动和大小调整

    原文:wpf无边框窗体移动和大小调整   using System; using System.Windows; using System.Windows.Interop; namespace Wpf ...

  5. c语言指针详细解释

    指针是C语言中广泛使用的一种数据类型. 运用指针编程是C语言最基本的风格之中的一个.利用指针变量能够表示各种数据结构: 能非常方便地使用数组和字符串: 并能象汇编语言一样处理内存地址,从而编出精练而高 ...

  6. moost — Last.fm's collection of C++ utility libraries(功能很多)

    libmoost libmoost is a collection of C++ utility libraries, including: algorithms (set intersection, ...

  7. MFC中获取App,MainFrame,Doc和View类等指针的方法

    From: http://hi.baidu.com/wxnxs/item/156a68f5b3b4ed18e3e3bd03   MFC中获取App,MainFrame,Doc和View类等指针的方法 ...

  8. 微信小程序特殊效果合集

    微信小程序的开发并不难,但是有时我们想做出比较炫的效果,可能会一时没有思路或找不到方法.下面就整理了微信小程序的一些特殊效果的案例,均来自网络,供你参考. 1.文字跑马灯效果:http://www.w ...

  9. 第四十天 阿乐在其中—Android小游戏的飞机(四)加入敌人

    8月9日,晴. "江城如画里,山晓望晴空. 雨水夹明镜.双桥落彩虹. 人烟寒橘柚,秋色老梧桐." 上篇已经让飞机载入子弹和音效及背景音乐,本篇主要加入敌机. 本篇要用到的几个函数解 ...

  10. ThreadPool类(线程池)

    原文:ThreadPool类(线程池) CLR线程池并不会在CLR初始化时立即建立线程,而是在应用程序要创建线程来运行任务时,线程池才初始化一个线程.线程池初始化时是没有线程的,线程池里的线程的初始化 ...