signed

QiShunwang

“诚信为本、客户至上”

jquery scroll()区分横向纵向滚动条的方法

2021/6/9 6:01:49   来源:

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>

您可能感兴趣的文章:
  • jQuery scroll事件实现监控滚动条分页示例
  • ScrollView滚动条颜色的设置方法
  • jquery滚动条插件jScrollPane的使用介绍
  • android开发教程之文本框加滚动条scrollview
  • zepto.js中tap事件阻止冒泡的实现方法
  • 基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
  • 基于zepto.js简单实现上传图片
  • jQuery插件zepto.js简单实现tab切换
  • 基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
  • scroll事件实现监控滚动条并分页显示(zepto.js)