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 相关文章推荐
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
JavaScript常用工具方法封装
Feb 12 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 编程安全性小结
2010/01/08 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
yii用户注册表单验证实例
2015/12/26 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
webpack3之loader全解析
2017/10/26 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
一个超级简单的python web程序
2014/09/11 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
Python实现最常见加密方式详解
2019/07/13 Python
Python如何实现动态数组
2019/11/02 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
半年思想汇报
2013/12/30 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
服务承诺书范文
2014/05/19 职场文书
李强为自己工作观后感
2015/06/11 职场文书
教师读书活动心得体会
2016/01/14 职场文书
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers