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实现弹出层效果实例
May 19 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
AngularJS表单基本操作
Jan 09 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
简单了解JavaScript异步
May 23 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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
PDO的安全处理与事物处理方法
2016/10/31 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
js实现文字滚动效果
2016/03/03 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
如何在pycharm中安装第三方包
2020/10/27 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
司机检讨书
2014/02/13 职场文书
研修第一天随笔感言
2014/02/15 职场文书
奠基仪式主持词
2014/03/20 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
机关作风建设自查报告
2014/10/22 职场文书
python 使用pandas读取csv文件的方法
2022/12/24 Python