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 复制数组实现代码
Nov 26 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
js实现无缝滚动图
Feb 22 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
design vue 表格开启列排序的操作
Oct 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
Ejb技术面试题
2015/04/29 面试题
应届生服装设计自我评价
2013/09/20 职场文书
社会工作专业自荐信
2014/09/26 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
Nginx配置使用详解
2022/07/07 Servers