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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
Vue.js学习示例分享
Feb 05 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
浙江文明网签名寄语
2014/01/18 职场文书
专题组织生活会方案
2014/06/15 职场文书
党委班子剖析材料
2014/08/21 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
解决Redis启动警告问题
2022/02/24 Redis