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>

赞 (0)

相关推荐

  • scroll事件实现监控滚动条并分页显示(zepto.js)

    需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页底部自动加载下一页并发加载埋点. 实现:首先理解三个概念,分别是contentH,viewH,scrollTop. contentH:即所要滑动的元素内容的高度,包括可见部分以及滚动条下面的不可见部分. ViewH:即我们看到的这个DIV的高度,不包括可见部分也不包括滚动条下面的不可见部分. scrollTop:即滚动条距离顶部的距离,若scrollTop的值为0,则

  • zepto.js中tap事件阻止冒泡的实现方法

    本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法.分享给大家供大家参考.具体如下: 最近在弄一个手机版的网站,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js 由于移动网页中使用click事件会有延迟,所以就用上了zepto.js中的tap事件. 使用click事件可以使用stopPropagation来阻止冒泡,但tap使用该方法无效 现在我需要实现这样一个效果:点击a.btn这个按钮,然后显示div.panel,当我点击非div.panel时隐藏div.

  • jQuery插件zepto.js简单实现tab切换

    老规矩,先贴代码 <script> $(function(){ window.onload = function() { var $li = $('.taocan-title li'); var $ul = $('.taocan-content .con110'); $li.mouseover(function(){ var $this = $(this); var $t = $this.index(); $li.removeClass(); $this.addClass('active');

  • jQuery scroll事件实现监控滚动条分页示例

    scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了    $(window).scroll(function () {        //$(window).scrollTop()这个方法是当前滚动条滚动的距离        //$(window).height()获取当前窗体的高度        //$(docume

  • 基于zepto.js简单实现上传图片

    基于zepto.js简单实现上传图片

    效果如下: html: <div class="otherPic"> <div id="showOtherImage"></div> <span class="pull-left position_relative" id="openIdCardImg"> <span class="icon color-blue addPic"></spa

  • jquery滚动条插件jScrollPane的使用介绍

    这是一个js的页面滚动条插件 使用时引入三个文件:(路径自行填写) 复制代码 代码如下: <link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="路径/jquery.mousewheel.js

  • ScrollView滚动条颜色的设置方法

    很多开发者在做Android UI时不知道如何设置ScrollView滚动条控件的滑块颜色,其实通过ScrollView的xml布局属性android:scrollbarThumbVertical可以关联一个drawable对象,比如说在ScrollView中我们有 android:scrollbars="vertical" //滚动条是垂直的android:scrollbarThumbVertical="@drawable/red" //垂直滚动条颜色为red,r

  • 基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）

    最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善:写的不好的地方望各位能够给出好的建议,谢谢! 源码地址:https://github.com/GLwen/molong_photoSwipe.git 演示:http://runjs.cn/detail/iceaaogh molong.css *{padding:0;m

  • android开发教程之文本框加滚动条scrollview

    我们都知道EditText与TextView是Android的文本输入框和文本显示框,但是基于手机屏幕的大小因素,如果在需要输入较多文字或者显示较多内容的时候,手机屏幕是远远不够的,因此让文本框具有滚动条的功能是手机上必备的,下面介绍下如何加上滚动条.要加上滚动条,其实很简单,只需要在文本输入框或者文本显示框上面加上滚动条控件即可,该控件名字为ScrollView,以下我们对比下(以TextView举例). 复制代码 代码如下: //A.未加滚动效果 <TextView android:layo

  • 基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解

    调用方式 :ImageView(index,imgData)  --index参数 为图片默认显示的索引值,类型 为Number  --imaData参数 为图片url数组 ,类型为Array 使用之前要先引入 zepto.js 文件 ImageView.js具体代码如下: 复制代码 代码如下: /*  * ImageView v1.0.0  * --基于zepto.js的大图查看  * --调用方法 ImageView(index,imgDada)  * --index 图片默认值显示索引,N

随机推荐