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 上下左右键控制焦点(示例代码)
Dec 14 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 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
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
Vue实现简易计算器
2020/02/25 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
遗传算法之Python实现代码
2017/10/10 Python
python3爬取各类天气信息
2018/02/24 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
python3 logging日志封装实例
2020/04/08 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
工程师岗位职责
2013/11/08 职场文书
机关财务管理制度
2014/01/17 职场文书
小学生读书活动总结
2014/06/30 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis