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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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读取MySQL数据代码
2008/06/05 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
Python简单连接MongoDB数据库的方法
2016/03/15 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python微信公众号开发平台
2018/01/25 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
Python定时器线程池原理详解
2020/02/26 Python
Django框架models使用group by详解
2020/03/11 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
导游欢迎词范文
2015/01/23 职场文书
Python的property属性详细讲解
2022/04/11 Python