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 相关文章推荐
javascript 限制输入脚本大全
Nov 03 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
深入理解vue中的$set
Jun 01 Javascript
js实现京东轮播图效果
Jun 30 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 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
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
nodejs基础知识
2017/02/03 NodeJs
Vue编写多地区选择组件
2017/08/21 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
小区门卫岗位职责
2013/12/31 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
法律进企业活动方案
2014/03/04 职场文书
端午节活动策划方案
2014/03/09 职场文书
投资建议书模板
2014/05/12 职场文书
教师师德师风整改措施
2014/10/24 职场文书
总经理检讨书范文
2015/02/16 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
先进个人主要事迹范文
2015/11/04 职场文书