基于jQuery实现滚动刷新效果


Posted in Javascript onJanuary 09, 2017

Jquery实现简单的滚动刷新效果:

实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果

HTML正文:

<form id="form1" runat="server">
<div style="height: 3000px; background-color: yellow;">
</div>
</form>

Javascript操作代码:

$(document).ready(function() {

 $(window).scroll(function() {
//$(document).scrollTop() 获取垂直滚动的距离:最小值为0,最大值:文档高度-可视化窗口高度
//$(document).scrollLeft() 这是获取水平滚动条的距离
  console.log("垂直滚动条位置:"+$(document).scrollTop()+"--"+$(window).height());

 if ($(document).scrollTop() <= 0) {
    console.log("滚动条已经到达顶部为0");
  }

  /**
   *$(document).height():文档的高度
   *$(window).height():可视域的高度:窗口的大小:根据浏览窗口的大小变化
   *判断底部:文档高度<=滚动条垂直高度+可视窗口的高度
   * */
  if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
   console.log("滚动条已经到达底部为" + $(document).scrollTop());
  }
});
 });

效果:

基于jQuery实现滚动刷新效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
用jQuery实现优酷首页轮播图
Jan 09 #Javascript
AngularJS实现表单验证功能
Jan 09 #Javascript
AngularJS表单基本操作
Jan 09 #Javascript
AngularJS Controller作用域
Jan 09 #Javascript
详解JavaScript树结构
Jan 09 #Javascript
angular分页指令操作
Jan 09 #Javascript
jquery.zclip轻量级复制失效问题
Jan 08 #Javascript
You might like
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
python isinstance函数用法详解
2020/02/13 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
东方电视购物:东方CJ
2016/10/12 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
大学生就业自荐信
2013/10/26 职场文书
园林设计师自荐信
2013/11/18 职场文书
新年爱情寄语
2014/04/08 职场文书
社区清明节活动总结
2014/07/04 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
幼师求职自荐信
2015/03/26 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android