1 应用场景:文章比较长,只加载部分,当到页面底部触发获取更多数据。

2 如图,监听滚动条的位置,触发事件,转化为求X的长度,

3 实例代码:

//滚动条到底加载更多
$(document).on("scrollstop","#Report_Content",function ScollPostion() {//滚动条位置
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
h = document.body.scrollHeight;
console.log(t);
console.log(h);
}
var wh = $(window).height(); //页面可视区域高度
var s = h - (t + wh);
if ( s <= 100 ) {
// 2 获取下一个页面ID的内容,append 到现有内容后面。
GetReportContentAppendById(id,function CallBack(data){
id=data;
});
}else if( t <= -50 ){
alert('滚动条到顶了');
}
});

JQM 页面滚动加载的更多相关文章

  1. 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  2. 在页面制作的时候常用的html页面滚动加载,可视区域判断方法

    演示图 考虑2个情况一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色一种情况是,从头向下看的. 代码 .ss li { margin: 40px; } <d ...

  3. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  4. 不想分页怎么办??-->页面数据的滚动加载

    在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...

  5. h5页面列表滚动加载数据

    h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...

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

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

  7. HTML5商城开发一 楼层滚动加载数据

    对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...

  8. [转] Jquery滚动加载

    原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...

  9. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

随机推荐

  1. INFORMATION_SCHEMA.INNODB_TRX 详解

    从192.168.11.186 上登录 192.168.11.185 数据库: root 13246 547 0 13:39 pts/1 00:00:00 mysql -uroot -px xxxxx ...

  2. Chapter 17 Replication

    Chapter 17 Replication Table of Contents 17.1 Replication Configuration 17.2 Replication Implementat ...

  3. 【转】Mac 下钥匙串不能授权访问怎么解决--不错

    原文网址:https://www.v2ex.com/t/240495 如题,之前都好好的,后来有次 xcode 打包 app 时弹出提示框要授权,我点击允许和始终允许都没反映,点拒绝就可以,刚才安装 ...

  4. Android4.0 -- UI控件之 Menu 菜单的的使用(三)

    上一讲 [Android 开发]:UI控件之 Menu 菜单的的使用(二) 我们讲解了创建上下文菜单的第一种使用方式:Creating a floating context menu [创建悬浮的上下 ...

  5. dev中gridview控件 z

    目录:一.客户端常用1.常用API2.聚焦行变更事件3.客户端选择多行4.客户端选择行5. 获取选择的行数目6.单击行时,选中行7.通过checkbox 选择行8.选择所有行9.启动编辑框,Conta ...

  6. HTTP 错误 404.3 - Forbidden

    在iis中能够浏览所有扩展名的文件时,IIS MIME的 映射 您只能在故障排除过程中将通配符映射添加到 IIS MIME 映射中,以作为一种临时解决方案.确定缺少 MIME 类型是问题的原因后,请删 ...

  7. 深入设计模式(二)——单例模式(Singleton Pattern)

    一.单例模式介绍 单例模式(Singleton Pattern),保证一个类只有一个实例,并提供一个访问它的全局访问点.单例模式因为Singleton封装它的唯一实例,它就可以严格地控制客户怎样访问它 ...

  8. Bzoj 1391: [Ceoi2008]order 网络流,最大权闭合图

    1391: [Ceoi2008]order Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1105  Solved: 331[Submit][Statu ...

  9. 【解决】笔记本发射WiFi

    这个百度一下一大堆 .. 不过还是希望自己总结一发适合自己的 (*^__^*)  废话不多说,开始 基于几个bat (1)CreateWlan.bat netsh wlan set hostednet ...

  10. kvm usb2.0

    Virt-Manager adds support for usb2 Wednesday, April 4, 2012 - 10:40 Haydn Solomon The most recent re ...