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 相关文章推荐
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
js实现微信聊天效果
Aug 09 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
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
浅谈Python基础之I/O模型
2017/05/11 Python
浅谈python迭代器
2017/11/08 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python列表(List)知识点总结
2019/02/18 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
基于Python实现粒子滤波效果
2020/12/01 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
毕业设计计划书
2014/01/09 职场文书
新教师工作感言
2014/02/16 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
超强台风观后感
2015/06/09 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
CentOS安装Nginx并部署vue
2022/04/12 Servers
python使用shell脚本创建kafka连接器
2022/04/29 Python