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 1.8 Release版本发布了
Aug 14 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
vue调用语音播放的方法
Sep 27 Javascript
react组件基本用法示例小结
Apr 27 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图片验证码实例
2014/03/21 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
javascript document.images实例
2008/05/27 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python 统计字数的思路详解
2018/05/08 Python
详解Python3注释知识点
2019/02/19 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
任意存:BOXFUL
2018/05/21 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
企业授权委托书范本
2014/09/22 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
承诺函格式模板
2015/01/21 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
日元符号 ¥
2022/02/17 杂记
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL