$(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
          //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
          //shlar page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
          //redgiftList(page);
         //$("#redgiftNextPage").attr('currentpage', page + 1);

    console.log("到底了,发起请求")
  }
});

解析:
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)。

原页面地址:https://www.cnblogs.com/chen-lhx/p/5121360.html

jQuery页面滚动底部加载数据的更多相关文章

  1. Jquery页面滚动动态加载数据,页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  2. 页面滚动动态加载数据,页面下拉自动加载内容 jquery

    <!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...

  3. JQuery ajax 滚动底部加载更多

    <%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ ...

  4. Android中GridView滚动到底部加载数据终极版

    之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...

  5. Ajax 滚动异步加载数据

    第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...

  6. div滚动底部加载li,window滚动底部加载li

    DIV固定高度滚动条滚动最底部,加载新的li <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  7. [转]JavaScript实现 页面滚动图片加载

    本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个 ...

  8. AppCan学习笔记----关闭页面listview动态加载数据

    AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...

  9. 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo

    <html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...

随机推荐

  1. Mac OS X 启用超级用户 sudo -s 获得系统权限 Mac终端命令

    为了防止误操作破坏系统,用户状态下时没有权限操作系统重要文件, 所以先要取得root权限:“sudo -s” 详见:https://www.jianshu.com/p/138b98e662ed

  2. MacOS安装kafka可视化工具Kafka Tool

    1 下载地址 http://www.kafkatool.com/download.html 2 下载dmg包,选择对应版本,我的kafka是2.1的版本,所以选择了Kafka Tool 2.0.4 3 ...

  3. v-module绑定vuex里面的数据

    当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用  v-model  会比较棘手: <input v-model="obj.message"> ...

  4. 【Thymeleaf】浅谈Java模板引擎(带更新...)

    什么是模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 为什么要用模板 ...

  5. Ajax——从服务器获取各种文件

    ajax.js内容 function ajax(url,fnWin,fnFaild){ //1.创建ajax对象 var xhr = window.XMLHttpRequest ? new XMLHt ...

  6. Java开发环境配置(1)--tool准备

    工具准备:1.eclipse-mars开发工具必须安装 2.XAMPP-环境集成了MYSQL,APACHE,TOMCAT建议安装 3.TOMCAT提供了二个版本(8.0和9.0),建议安装一个以备不时 ...

  7. DeepLearning.ai-Week2-Keras tutorial-the Happy House

    1 - Import Packages import numpy as np from keras import layers from keras.layers import Input, Dens ...

  8. springboot中.yml没有spring的小叶子标志解决办法

    我的idea springboot项目中有两个.yml文件,一个application.yml,一个log4j2.yml,但是只有application.yml显示的是树叶图标,如下所示 做如下配置后 ...

  9. SpringSecurity自定义用户认证逻辑

    ⒈处理用户信息获取逻辑 用户信息的获取逻辑是被SpringSecurity封装到UserDetailsService接口里面的 package org.springframework.security ...

  10. 8.3版本提示未在本地计算机上注册 Microsoft.ACE.OLEDB.12.0 提供程序

    这个原因是8.3版本推出了64位程序,但是Access驱动在64位系统上默认是没有安装的,需要下载一个组件安装即可. 下载2010 Access 驱动程序:数据连接组件安装 http://www.ba ...