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 TO HTML 转换
Jun 26 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php 数组的一个悲剧?
2011/05/11 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python计算一个序列的平均值的方法
2015/07/11 Python
Python编程中的异常处理教程
2015/08/21 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python偏函数实现原理及应用
2020/11/20 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
护士的岗位职责
2013/12/04 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库