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 相关文章推荐
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
详解Vue的ref特性的使用
Jan 24 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python创建xml的方法
2015/03/10 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
Python 远程开关机的方法
2020/11/18 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
物流毕业生个人的自我评价
2014/02/13 职场文书
材料化学专业求职信
2014/07/15 职场文书
材料员岗位职责范本
2015/04/11 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
申请吧主发表的感言
2015/08/03 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫
python lambda 表达式形式分析
2022/04/03 Python