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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
JavaScript利用键盘码控制div移动
Mar 19 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
杏林同学录(一)
2006/10/09 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php计算整个目录大小的方法
2015/06/01 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python正则实现提取电话功能
2018/02/24 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
python实现PID算法及测试的例子
2019/08/08 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
初中新生军训方案
2014/05/13 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
青年教师听课心得体会
2016/01/15 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis