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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 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
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
jquery操作angularjs对象
2015/06/26 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
给男朋友的道歉信
2014/01/12 职场文书
文明风采获奖感言
2014/02/18 职场文书
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL