jQuery 事件 scroll() 方法的使用教程
当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。scroll() 函数触发 scroll 事件。或者如果设置了 function 函数,则规定当发生 scroll 事件时执行的代码。
首先介绍一下(document).height()与$(window).height()的区别:
$(document).height() 是获取整个页面的高度
$(window).height() 是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的
scrollTop()和scrollLeft()的使用:
$(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离
要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了
要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了
下面介绍一个scroll事件实现监控滚动条分页简单示例,使用ajax加载,代码如下:
$(document).ready(function () { $(window).scroll(function () { //$(window).scrollTop()这个方法是当前滚动条滚动的距离 //$(window).height()获取当前窗体的高度 //$(document).height()获取当前文档的高度 var bot = 50; //bot是底部距离的高度 if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) { //当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时; //我们需要去异步加载数据了 $.getJSON("url", { page: "2" }, function (str) { alert(str); }); } }); });
例子,去掉窗口滚动条(CSS中加入),代码如下:
body { overflow-x:hidden;
}
去掉窗口滚动条之后,拖动表格控件滚动条到最右仍然不能看到完整表格。
解决:监听控件的scroll方法,当列实际宽度超出窗口宽度时,横向滚动窗口,以便查看整个表格,代码如下:
XXX.scroll(function (e) { XXX.scrollLeft($(this).scrollLeft()); if (totalWidth > $(window).width()){ $(window).scrollLeft($(this).scrollLeft()); } })
用jquery的话,这个事件scroll 可以查看jquery api:http://api.jquery.com/scroll/,但scroll 事件有一个缺陷,就是只能判断滚动条滚动,而不能监控滚动条停止滚动时的事件,现用jquery扩展一下scroll 事件,新增
不多说,直接上代码实在点,代码如下:
(function(){ var special = jQuery.event.special, uid1 = 'D' + (+new Date()), uid2 = 'D' + (+new Date() + 1); special.scrollstart = { setup: function() { var timer, handler = function(evt) { var _self = this, _args = arguments; if (timer) { clearTimeout(timer); } else { evt.type = 'scrollstart'; jQuery.event.handle.apply(_self, _args); } timer = setTimeout( function(){ timer = null; }, special.scrollstop.latency); }; jQuery(this).bind('scroll', handler).data(uid1, handler); }, teardown: function(){ jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) ); } }; special.scrollstop = { latency: 300, setup: function() { var timer, handler = function(evt) { var _self = this, _args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout( function(){ timer = null; evt.type = 'scrollstop'; jQuery.event.handle.apply(_self, _args); }, special.scrollstop.latency); }; jQuery(this).bind('scroll', handler).data(uid2, handler); }, teardown: function() { jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) ); } }; })();
可以将上面代码保存到一个文件,这相当于一个插件,呵呵,调用方法如下,代码如下:
- (function(){
- jQuery(window).bind('scrollstart', function(){
- console.log("start");
- });
- jQuery(window).bind('scrollstop', function(e){
- console.log("end");
- });
- })();
现在项目使用的
$(window).scroll(function(){ //$(window).scrollTop()滚动高度 $(window).height() //可见高度if($(window).scrollTop()+$(window).height() + 60 >= $(document).height()){ //$(document).height()代表整个文档(页面)的高度clearTimeout(timer)timer = setTimeout(function(){getList(page*10+1)page++;},300)}
})
jQuery 事件 scroll() 方法的使用教程相关推荐
- jQuery 事件 - ready() 方法
jQuery 事件 - ready() 方法 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 1.语法1 $(document).ready(fu ...
- jquery事件使用方法总结
jquery提供了许多的事件处理函数,下面对其总结一下,梳理一下知识点,便于记忆和使用. 一.鼠标事件 1. click():鼠标单击事件 $div = $("div") $div ...
- jQuery 事件绑定方法(bind hover toggle live.... )、删除事件方法(unbind, die)及 事件对象
事件绑定方法: 1.<type>(function) $("button").click(function(){... }); 2.bind(map) $(" ...
- miniui mysql_MiniUi系列 jQuery 事件 - delegate() 方法
当点击鼠标时,隐藏或显示 p 元素: $("div").delegate("button","click",function(){ $(&q ...
- 很实用的jQuery事件 - toggle() 方法
转自w3school 实例 切换不同的背景色: $("p").toggle(function(){$("body").css("background- ...
- jQuery 事件 - bind() 方法
定义和用法 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 实例1(一个事件) 记得把js引用地址换掉 当点击鼠标时,隐藏或显示 p 元素: <html&g ...
- jquery事件代理方法
之前写过原生js的事件代理,最近在用jquery写项目,自然少不了事件代理,所以今天就来写下jquery的事件代理: 例如下面的例子:用事件代理的方法给每个li都添加一个点击事件, HTML代码: & ...
- Jquery事件DELEGATE()方法用法详解
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数,使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由 ...
- jQuery 事件 - blur() 方法
当元素失去焦点时发生 blur 事件. blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码. 提示:早前,blur 事件仅 ...
最新文章
- 基于C++的PyTorch模型部署
- 【PHP】字符串去空格并将每个单词首字母转换成大写de多种解法
- 后处理编辑修改_NX后处理打开报错处理方法
- 嵌入式深度学习运用的思路
- 2021-04-07 In literature VS In the literature
- 新冠肺炎的可视化和预测分析(附代码)
- Dubbo与Spring Cloud
- 抄底公式---预测黑马
- jQuery AJAX实现调用页面后台方法
- UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xb4 in position 176: in xxxx
- 配置防盗链 访问控制Directory 访问控制FilesMatch
- linux下 复制文件显示进度 alias cp
- 线性代数(第六版) 同济大学数学系 编 高等教育出版社 课后习题答案
- 联想Y720,win10下安装双系统Ubuntu过程遇到的一些问题及解决方法
- 前端学习的开源实战项目及其源码
- 我的世界检测不到java_《我的世界》检测不到java怎么办?
- OPPO R8107刷机教程 救砖解锁 刷机包下载
- 论文笔记_SIGGRAPH2019会前课程:An Introduction to Physics-Based Animation_1
- 已知某一点坐标、线段长度和旋转角度,求另一点坐标
- 使用Atoum测试PHP代码-PHPUnit的替代方法
热门文章
- java 抓取网页乱码_java抓取网页乱码问题的处理
- 运营︱如何有效推广海外社交app
- ccproject西西进度计划编制软件最新版11.35发布
- H5+jqweui实现手机端图片压缩上传
- POI报表——模板打印 AND 海量数据导出
- 计算机考试都是60分合格吗,bim考试显示考评结果通过是达到60分了吗?
- H5大行其道,微信应用号的个人看法
- HashMap源码面试题
- 人工智能:一种现代方法学习笔记(第六章)——约束满足问题
- python数据可视化之美专业图表绘制指南_2019第23周:评《R语言数据可视化之美:专业图表绘制指南》...