jquery scroll()区分横向纵向滚动条的方法


Posted in Javascript onApril 04, 2014

jquery在scroll()事件里面,我想判断当前滚动条横向还纵向;
我开始用全局变量记录scrollTop的值来判断的,如果前后值没有变就是横向滚动了,
但是页面里有多个滚动条,就要多个全局变量来控制,该怎么判断呢?
scroll jquery 区分横向纵向滚动条

解决方法:
each一次设置选择器选中对象的scrollLeft/scrollTop就行了,然后绑定scroll事件,触发的时候获取scrollLeft/scrollTop和初始化的scrollLeft/scrollTop对比判断是横向还是纵向,同时更新对象存储的scrollLeft/scrollTop

<style>
.c{height:120px;width:120px;overflow:auto;border:solid 1px black;margin-bottom:5px;}
</style>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>

<script src="/js/jquery.js"></script>
<script>
$('div').each(function(){$(this).data('slt',{sl:this.scrollLeft,st:this.scrollTop});}).scroll(function(){
    var sl=this.scrollLeft,st=this.scrollTop,d=$(this).data('slt');
    if(sl!=d.sl)alert('横向滚动');
    if(st!=d.st)alert('纵向滚动');
    $(this).data('slt',{sl:sl,st:st});///
})
</script>
Javascript 相关文章推荐
Javascript 解疑
Nov 11 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 #Javascript
javascript移出节点removeChild()使用介绍
Apr 03 #Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 #Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 #Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 #Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 #Javascript
单击和双击事件的冲突处理示例代码
Apr 03 #Javascript
You might like
初识php MVC
2014/09/10 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
图片完美缩放
2006/09/07 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
Python读取键盘输入的2种方法
2015/06/16 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
Python文件操作的面试题
2013/06/22 面试题
行政专员工作职责
2013/12/22 职场文书
环保建议书
2014/03/12 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
服务理念标语
2014/06/18 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫