基于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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
详解React中的组件通信问题
Jul 31 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
利用PHP创建动态图像
2006/10/09 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python用GET方法上传文件
2015/03/10 Python
简单实现python收发邮件功能
2018/01/05 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
岗位职责怎么写
2014/03/14 职场文书
新教师培训方案
2014/06/08 职场文书
公司门卫工作职责
2014/06/28 职场文书
人事文员岗位职责
2015/02/04 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang