滚动条滑到底部进行刷新
来源:互联网 发布:linux支持哪些文件系统 编辑:程序博客网 时间:2024/05/20 22:02
最近在做项目的时候遇到需要做下拉刷新,就总结了一个小例子,不过其精确性还有待研究
基于jQuery的scroll事件来实现滚动条到达最低部,进行刷新
主要原理是当滚动条卷起的高度加上屏幕或者设备的高度的和大于等于文档的高度的时候进行刷新
在例子只是做了一个简单的虚假刷新,引用jQuery的.clone()和.appendTo()方法。
下面给出代码
<pre name="code" class="html"><!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>下拉刷新</title> <script src="jquery-1.11.3.js"></script> <style> *{ margin: 0;padding: 0;} </style></head><body><div id="container"> <div style="width:100%;height:300px;background:#f00">111111111</div> <div style="width:100%;height:300px;background:#0f0">222222222</div> <div style="width:100%;height:300px;background:#00f">333333333</div></div><div id="jiazai" style="position:fixed;bottom:0;left:0;width:100%;line-height:20px;font-size:16px;color:#fff;text-align:center;display:none;">正在加载</div> <script> //滚动到页面底部时,自动加载更多 $(window).scroll(function(){ var scrollh = $(document).height(); var scrollTop=Math.max(document.documentElement.scrollTop||document.body.scrollTop); if((scrollTop + $(window).height()) >= scrollh){ $("#jiazai").show(); var interval = setTimeout(function(){ $("#jiazai").hide(); },1000); var inter = setTimeout(function(){ $("#container div").first().clone().appendTo($("#container")); },1000); } });</script> </body></html>
$(document).height()指的是文档的总高度
<pre name="code" class="html">Math.max(document.documentElement.scrollTop||document.body.scrollTop)滚动条卷起来的高度
<pre name="code" class="html">$(window).height() 当前视口的高度
1 0
- 滚动条滑到底部进行刷新
- 上拉刷新中如何判断UITableView滚动到了底部
- Android实现刷新后自动滚动底部最后一项
- jquery weui 实现手机滚动刷新,结合底部tabber
- 页面刷新的时候滚动条默认置于底部
- 滚动条底部刷新的实现和防止重复刷新的办法
- js 滑动滚动条时进行刷新列表
- 滚动到底部加载更多及下拉刷新listview的使用
- 下拉刷新及滚动到底部加载更多的Listview使用
- 下拉刷新及滚动到底部加载更多的Listview使用
- 下拉刷新及滚动到底部加载更多的Listview使用
- 下拉刷新及滚动到底部加载更多的Listview使用
- Jquery 判断滚动条到达顶部或底部 (可用于上拉下拉加载刷新)
- Android下拉刷新、滚动到底部自动加载更多RecyclerView组件
- XRecyclerView:实现下拉刷新、滚动到底部加载更多以及添加header功能的RecyclerView
- ajax鼠标滚动到网页底部实现局部刷新~瀑布流
- scrollerView内的数据每次刷新都会滚动到底部处理
- 触摸屏幕,滚动页面内容到底部,上拉刷新显示数据
- mac下安装php扩展phpredis
- Flex 布局教程:实例篇
- Educational Codeforces Round 15 D. Road to Post Office (数学)
- bzoj 1057:棋盘制作(悬线法)
- Android开发之Android内存管理原理
- 滚动条滑到底部进行刷新
- 计算几何公式
- HDU 1285--确定比赛名次
- 利用html5-canvas及javascript产生三维星空效果的代码
- I/O多路转接之epoll
- Dubbo服务 初学配置
- Java中Object类的equals()和hashCode()方法
- c# 把excel表格当做数据库的使用感受
- SCPPO(十五):IIS配置文件节点加密