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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 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
虫族 ZERG 概述
2020/03/14 星际争霸
php设计模式小结
2013/02/15 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
从零学Python之hello world
2014/05/21 Python
微信跳一跳python代码实现
2018/01/05 Python
python flask安装和命令详解
2019/04/02 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Python通过len函数返回对象长度
2020/10/22 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
三年级音乐教学反思
2014/01/28 职场文书
文明村镇申报材料
2014/05/06 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
2014年教学工作总结
2014/11/13 职场文书
晚会开幕词
2015/01/28 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL