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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
php发送post请求的三种方法
2014/02/11 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
Python unittest生成测试报告过程解析
2020/09/08 Python
如何完美的建立一个python项目
2020/10/09 Python
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
幼师自荐信范文
2013/10/06 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
联谊会主持词
2014/03/26 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
委托书英文
2015/01/28 职场文书
教师个人成长总结
2015/02/11 职场文书
单位计划生育责任书
2015/05/09 职场文书
学生会干部任命书
2015/09/21 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书