基于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 相关文章推荐
javascript 用原型继承来实现对象系统
Mar 22 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
vue实现简单跑马灯效果
May 25 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
用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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
asm.js使用示例代码
2013/11/28 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
python中OrderedDict的使用方法详解
2017/05/05 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python中的枚举类型示例介绍
2019/01/09 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python实现括号匹配方法详解
2020/02/10 Python
实例代码讲解Python 线程池
2020/08/24 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
"序列点" 是什么
2016/07/29 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
医学实习生自我鉴定
2013/12/12 职场文书
同学聚会感言一句话
2015/07/30 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS