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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
如何在 Vue 中使用 JSX
Feb 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
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
cookie的secure属性详解
2015/04/08 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
python浪漫表白源码
2019/04/05 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
简单了解python变量的作用域
2019/07/30 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
机关办公室岗位职责
2014/04/16 职场文书
基层党支部整改方案
2014/10/25 职场文书
护理医院见习报告
2014/11/03 职场文书
质检员岗位职责
2015/02/03 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android