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 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
实现高性能javascript的注意事项
May 27 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
vue中实现图片压缩 file文件的方法
May 28 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入门
2006/10/09 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
js中this对象用法分析
2018/01/05 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python之时间和日期使用小结
2019/02/14 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
会计工作心得体会
2014/01/13 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
教师求职信
2014/06/17 职场文书
酒会开场白大全
2015/06/01 职场文书
辅导员学期工作总结
2015/08/14 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis