`
cshzyh
  • 浏览: 9991 次
社区版块
存档分类
最新评论

js 滚动到底部自动刷新

    博客分类:
  • js
js 
阅读更多
 
//获取滚动条当前的位置 
function getScrollTop() { 
var scrollTop = 0; 
if (document.documentElement && document.documentElement.scrollTop) { 
scrollTop = document.documentElement.scrollTop; 
} 
else if (document.body) { 
scrollTop = document.body.scrollTop; 
} 
return scrollTop; 
} 

//获取当前可是范围的高度 
function getClientHeight() { 
var clientHeight = 0; 
if (document.body.clientHeight && document.documentElement.clientHeight) { 
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
} 
else { 
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
} 
return clientHeight; 
} 

//获取文档完整的高度 
function getScrollHeight() { 
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
} 

window.onscroll = function () {
if (getScrollTop() + getClientHeight() == getScrollHeight()) {
alert("到达底部");
}
} 
分享到:
评论

相关推荐

    原生js滚动到底部加载数据Scrollload.zip

    gzip后不到3k)、可配置性高(可以自定义加载时候动画、加载完后的dom、提前加载的距离)、可扩展性强大(很方便做到指定容器内的滚动、多tab的滚动、异常处理、刷新重新加载等)、性能好(在滚动的时候做了一些性能...

    fkscrollrefresh:FKScrollRefresh滚动刷新jQuery下拉刷新上拉加载操作插件

    mode: 'all', // first:位于顶部的下拉刷新或或左侧右拉刷新 last: 位于底部的上拉刷新或右侧的左拉刷新 all:同时支持上下拉刷新动作 slideSelector: '', //指定子元素的对象[一般不用指定] wrapperClass: 'fk-...

    JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析

    因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部。 模仿淘宝,...

    jquery.infini_scroll.js:jquery无限滚动加载插件

    What isinfini scroll jquery 插件用来在页面滚动到屏幕底部时自动加载内容并追加 DOM 元素到页面底部,api接口友好,可能是你目前能找到的最简单好用的无限滚动加载插件。Live DemoInstallation包含 infini_scroll ...

    iscroll分页滚动(加回到顶部)

    iscroll.js下拉滚动刷新demo 新增 1:回到顶部效果; 2:底部悬浮显示当前页数与总页(例1/5);

    程序天下:JavaScript实例自学手册

    5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表...

    《程序天下:JavaScript实例自学手册》光盘源码

    5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表...

    mescroll上拉加载下拉刷新插件(附带demo)

    可指定列表平滑滚动到任何位置。支持监听列表滚动事件,可一键滚动到列表顶部和底部,附带平滑缓冲效果。自动控制翻页。无需手动判断处理列表的页码,时间等变量等等

    vue-virtual-infinite-scroll-基于Iscroll的vue2组件,支持具有高性能滚动,无限加载和拉动刷新的大数据列表。-Vue.js开发

    vue-virtual-infinite-scroll基于Iscroll的vue2组件,支持具有高...支持底部loadmore和下拉刷新事件演示https://zuolei828.github.io/virtual-scroll/取消选中虚拟滚动条意味着正常的大数据列表不使用我们的组件。 一世

    thinkphp框架基于ajax,js的滚屏加载技术demo

    初学php,基于ajax,js用thinkphp做的拉下滚动条到底部时,无刷新加载数据库内容,很简单的数据库,就一条记录,简单的加载,并在引动段也测试过可用.此应用代码有一个小前提,就是默认页面原有的内容量够多,是页面存在滚动...

    jquery.scrollz:jQuery 的现代滚动

    jQuery 滚动 jQuery 的现代滚动。 该插件主要设计用于触摸设备,也适用于桌面浏览器。 目前仅支持垂直滚动。 请注意,该插件不使用小部件工厂模型,因为它可以与普通 jQuery(没有 jQuery UI 或 jQuery Mobile)...

    Qt5 qml 各种功能事例,详细功能见资源描述

    QmlTextEditScrollBar: QmlTextEdit带滚动条 QmlToggleButton: Qml选择开关 QmlCircularProgress: Qml圆形进度条 QmlFontList: Qml获取字体列表 QmlFlipImage: Qml翻转效果 QmlGrayImage: Qml图片转灰度 QmlProgress...

    php+ajax实现无刷新动态加载数据技术

    滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的...

    JavaScript实例精通

    JavaScript实例精通 1.本书1~20章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:、Dreamwave、Notepad、UltraEdit,或者其他文本编辑器 Web服务器:IIS 5.1及...

    《JavaScript实例精通》[源代码]

    示例描述:JavaScript快速处理日期时间的操作。 5_1.htm 获取当前日期并显示在HTML页中。 5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示...

    大名鼎鼎SWFUpload- Flash+JS 上传

    在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash无法加载 Race-conditions when files are cached 兼容ASP.Net Forms SWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展 ...

    nodejs_chat:用node.js和socket.io编写的在线聊天室

    rooms-刷新房间列表,并将消息区域滚动到底部 joinResult {room}-返回房间更改结果 nameResult {成功,[名称|消息]}-返回昵称更改结果 消息{文本}-向指定房间广播用户或系统消息 去做 在房间列表中突出显示当前房间...

    精通JavaScript

    1.将该实例复制到C:\Inetpub\wwwroot下; 2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • ...

    文章管理系统

    更换“分享到代码”为 百度分享,地址改成百度分享,加入默认内置代码重置,内容页分享代码移到正文底部 7.搜索栏新增京东商城搜索 2012年01月05日 V2.4升级包 1.新增【管理员专区】->【数据处理管理】功能,可以...

    kwk-l2-jquery-lazy-loader-teacher-l2

    滚动到页面底部,请注意,每次向下滚动时,该站点都会向DOM添加四个项目。 延迟加载是增加页面加载时间的明智方法。 假设您在一家有趣的T恤公司工作,该公司有2000种客户可以选择的设计。 如果客户访问您的站点并...

Global site tag (gtag.js) - Google Analytics