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 传统事件模型构造的事件监听器实现代码
May 31 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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的可变变量名的使用方法分享
2012/02/05 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
小程序自定义日历效果
2018/12/29 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
python递归计算N!的方法
2015/05/05 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python根据服务获取端口号的方法
2019/09/25 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
精神文明单位申报材料
2014/05/02 职场文书
IT工程师岗位职责
2014/07/04 职场文书
经理岗位职责
2015/02/02 职场文书
法律意见书范文
2015/06/04 职场文书
北京青年观后感
2015/06/15 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript