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 加上最后自己的验证
Nov 04 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
layui文件上传实现代码
May 20 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 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 IP及IP段进行访问限制的代码
2008/12/17 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
php通过字符串调用函数示例
2014/03/02 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python实现动态创建类的方法分析
2019/06/25 Python
深入了解python中元类的相关知识
2019/08/29 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
年度考核自我鉴定
2013/11/09 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
业务员管理制度范本
2015/08/06 职场文书
创业计划书之家教托管
2019/09/25 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python