展会信息港展会大全

jquery scroll()方法区分浏览器横向和纵向滚动条的方法
来源:互联网   发布日期:2016-01-26 10:59:52   浏览:1581次  

导读:这篇文章主要介绍了使用jquery scroll()方法区分浏览器横向和纵向滚动条的方法,需要的朋友可以参考下jquery在scroll()事件里面,我想判断当前滚动条横向还纵向;我开始用全局变量记录scrollTop的值来判断的,如 ...

这篇文章主要介绍了使用jquery scroll()方法区分浏览器横向和纵向滚动条的方法,需要的朋友可以参考下

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>

赞助本站

人工智能实验室

相关热词: scroll jquery

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港