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实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
js实现文字滚动效果
Mar 03 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
通过js给网页加上水印背景实例
Jun 17 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&amp;mysql(二)
2006/10/09 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
js表单登陆验证示例
2016/10/19 Javascript
基本DOM节点操作
2017/01/17 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
图解javascript作用域链
2019/05/27 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
CSS3 简写animation
2012/05/10 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
学前班教师的自我鉴定
2013/12/05 职场文书
社团成立邀请函
2014/01/08 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js