<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>demo</title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
div#Loadding { text-align: center; margin-top: 10px; display: none; font-weight: bold; color:Red; }
div.content { width: 100%; height: 900px; border-bottom: 1px solid gray; font-weight: bold; color:Red;text-align: center;}
</style>
<script type="text/javascript">
if (!NeuF) var NeuF = {};
NeuF.ScrollPage = function (obj, options, callback) {
var _defaultOptions = { delay: 500, marginBottom: 100 }; //默认配置:延迟时间delay和滚动条距离底部距离marginBottom
options = $.extend(_defaultOptions, options);
this.isScrolling = false; //是否在滚动
this.oriPos = 0; //原始位置
this.curPos = 0; //当前位置
var me = this; //顶层
var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
//绑定滚动事件
$obj.scroll(function (ev) {
me.curPos = $obj.scrollTop();
if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
if (me.isScrolling == true) return;
me.isScrolling = true;
setTimeout(function () { me.isScrolling = false; }, options.delay); //重复触发间隔毫秒
if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
};
me.oriPos = me.curPos;
});
};
$(function () {
window.scrollTo(0, 0); //每次F5刷新把滚动条置顶
//marginBottom表示滚动条离底部的距离,0表示滚动到最底部才加载,可以根据需要修改
new NeuF.ScrollPage(window, { delay: 1000, marginBottom: 0 }, function (offset) {
if (offset > 0) {
$("#Loadding").show(); //加载提示
setTimeout(function () {
//这里就是异步获取内容的地方,这里简化成一句话,可以根据需要修改
$("#divContainer").append($("<div class='content'>第“" + ($(".content").size() + 1) + "”页内容</div>"));
//内容获取后,隐藏加载提示
$("#Loadding").hide();
}, 1000);
}
});
});
</script>
</head>
<body>
<div id="divContainer">
<div class="content">
这里是内容,尝试滚动,加载下一页内容。如果是大屏幕显示器,<br />请把CSS div.content 高度调高,以便看到滚动效果 </div>
</div>
<div id="Loadding">
正在加载,请稍候 ...</div>
</body>
</html>

javascript实现 滚动条滚动 加载内容的更多相关文章

  1. jQuery 图片随滚动条滚动加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. [javascript] javascript 实现数据滚动加载

    // tpl generate var tmpl = (function (cache, $) { return function (str, data) { var fn = !/\s/.test( ...

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

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

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

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

  5. js 滚动加载iframe框中内容

    var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function( ...

  6. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  7. PHP+InfiniteScroll实现网页无限滚动加载数据实例

    PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...

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

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

  9. 基于javascript实现图片懒加载(亲测有效)

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

随机推荐

  1. URAL 2018 The Debut Album (DP)

    题意:给出n长度的数列,其实1的连续个数不超过a,2的连续个数不超过b. 析:dp[i][j][k] 表示前 i 个数,以 j 结尾,并且连续了k个长度,要用滚动数组,要不然MLE. 代码如下: #p ...

  2. 在Ionic Framework 退出APP

    使用以下代码: ionic.Platform.exitApp(); 在控制器中增加: $scope.Quit = function(){ ionic.Platform.exitApp(); }

  3. 消息队列--RabbitMQ(一)

    1.消息队列概述 可以理解为保存消息的一个媒介/或者是个容器,与之相关有两个概念(即生产者(Publish)与消费者(Consumer)).所谓生产者,就是生产创造消息的一方,那么,消费者便是从队列中 ...

  4. 2018ICPC徐州区域赛网络赛B(逆序枚举或者正序深度搜索)

    #include<bits/stdc++.h>using namespace std;int n,m,k,l;int x[1007],y[1007],z[1007];int dp[1007 ...

  5. [Xcode 实际操作]四、常用控件-(1)UIButton控件的使用

    目录:[Swift]Xcode实际操作 本文将演示按钮控件的使用,按钮是用户界面中最常见的交互控件 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import U ...

  6. Leetcode初级算法(字符串篇)

    目录 反转字符串 颠倒整数 字符串中的第一个唯一字符 有效的字母异位词 验证回文字符串 实现strStr() 数数并说 最长公共前缀 字符串转整数(atoi) 反转字符串 和vector同样的进行sw ...

  7. mail邮箱

    1. 创建163邮箱(其他邮箱同理) 2.设置授权码 3.开启服务 4.vim /etc/mail.rc 5. 给你的qq邮箱设置163账号的白名 6. 发送md5结果到qq 7.无邮件正文 mail ...

  8. 得到RequestVO

    import java.io.IOException; import java.nio.charset.Charset; import javax.servlet.ServletInputStream ...

  9. myeclipse编辑jsp页面卡

    现象 但是遇到了一种情况,编辑jsp页面卡,尤其是使用快捷键ctrl+ 时会很卡. 编辑java页面没问题的,比较流畅. 在jsp页面中一点ctrl+  就卡几秒钟. 按照上篇文章中优化过后只是编辑j ...

  10. (转)linux下文件删除的原理精华讲解(考试题答案系列)

    linux下文件删除的原理精华讲解(考试题答案系列) 说明:本文为老男孩linux培训某节课前考试试题及答案分享博文内容的一部分,也是独立成题的,你可以点下面地址查看全部的内容信息.http://ol ...