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. C++ Prime:范围for语句

    C++11新标准引入了一种更简单的for语句,这种语句可以遍历容器或者其他序列的所有元素.范围for语句的语法形式是: for( declaration : expression) statement ...

  2. bzoj2333

    好题,先离线把连通块变成连续的区间每次连通块合并就相当于两个区间合并这样就轻易的用线段树解决了 type node=record wh:string[]; x,y:longint; end; ..*] ...

  3. C# Winform 实现自定义半透明loading加载遮罩层

    在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 usi ...

  4. 非sqlite和nigix的开源c项目

    1.http://code.google.com/p/friso/ 一.friso中文分词器 Friso是使用c语言开发的一款高性能中文分词器,使用流行的mmseg算法实现.完全基于模块化设计和实现, ...

  5. 一点一点学ASP.NET系列

    转自:http://www.cnblogs.com/stwyhm/archive/2006/08/10/473075.html 做开发近两年了,自认为自己还算是个知道要上进的人,每天不停地学习,不停地 ...

  6. (转载)JS事件监听 JS:attachEvent和addEventListener使用方法

    (转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...

  7. 最近买了个Mac Pro,用起来感觉是去年买了个表

    最近买了个 Mac Pro ,用了两个星期,强烈建议大家不要买 Mac Pro (128G)搞开发,反而建议用同样的价格,我买的是最便宜8千的,去买个带固态硬盘的联想X系列绝对比Pro好. 一.操作方 ...

  8. 今天遇到的i++问题之记录

    今天逛贴吧看到的,与自己预想的不同,于是在群里求解后方得知答案,遂记录之.代码来袭. function a(){ var i=1; i++; alert(i); } var c = a(); c(); ...

  9. [MarsZ]ThinkPHP项目实战总结

    本文原word格式百度云盘下载地址: http://pan.baidu.com/s/1qYqZFkg 综述 2 需求 2 作者 2 系统一览 2 Unity3d客户端 2 PHP后台 4 准备 6 X ...

  10. JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解

    这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...