`
zccst
  • 浏览: 3291866 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

scroll时判断向下滚动还是向上滚动

阅读更多
作者:zccst

有时候需要用到,判断页面是向上还是向下滚动了,兼容比较低版本的浏览器如IE6、7等。

原理:拿当前的scrollTop和之前的scrollTop对比
如果变大了,表示向下滚动(scrollTop值变大);
如果变小了,表示向上滚动(scrollTop值变小)。

难点是理解setTimeout=0时的运行机制。

$(document).ready(function(){
	var p=0,t=0;

	$(window).scroll(function(e){
			p = $(this).scrollTop();
			
			if(t<=p){//下滚
				.......
			}
			
			else{//上滚
				.......
			}
			setTimeout(function(){t = p;},0);		
	});
});


查看demo页:
http://www.uiej.com/demo/demo1171.html


setTimeout=0时的运行机制:
分享到:
评论

相关推荐

    JS简单判断滚动条的滚动方向实现方法

    //定义默认的向上滚与向下滚的边界 [removed] = [removed] = function(){ var oScrollTop=$(window).scrollTop(); if ( oScrollTop &gt; 80) {  //write your code } if ( oScrollTop &lt; 80) {  //write your ...

    vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

    主要介绍了vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起...

    仿淘宝商城table滚动全屏效果

    如果向下滚动,则隐藏导航栏和排序bar,使表格全屏显示。 参考了YIFullScreenScroll的实现,但是这个有一个问题,就是很难加上排序bar的隐藏和显示。而且有很多bug,比如在导航栏未全部显示时导航到另个界面,则...

    js文字滚动插件

    js文字滚动插件制作scroll文字自动滚动,设置新闻公告列表文字向上间歇滚动与文字向下间歇滚动。

    angular-scroll-events:滚动事件的Angular指令

    滚动事件的Angular指令实用程序库添加了对scroll-up和scroll-down事件的支持安装使用npm或yarn... module ( 'myApp' , [ 'g1b.scroll-events' , ...] ) 在视图中使用“向上滚动”和/或“向下滚动”指令&lt; div scro

    play-on-scroll:滚动播放视频

    向下滚动页面时将播放视频元素的jQuery插件。 向下滚动播放视频。 向上滚动可倒带视频。 灵感 安装 使用凉亭: bower install play-on-scroll 在jQuery之后将脚本附加到页面 [removed][removed] 要使插件正常...

    /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\

    禁止鼠标控制暂停或滚动 鼠标悬停滚动 文字翻屏滚动 文字间歇滚动 向/上/下/左/右/翻屏滚动 向上/下连续滚动 向上/下间歇滚动 .....

    react-stay-scrolled:React组件,使组件向下滚动

    使您的组件(例如消息框)向下滚动 现场演示 您可以在此处看到最简单的演示: 安装 $ npm install --save react-stay-scrolled 例子 运行示例: $ cd examples $ npm install $ npm start 用法 import React , { ...

    jqueryscrolla是一款页面滚动触发动画插件

    jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时,进入视口的元素会触发指定的CSS3动画。它和animate.css完美结合,可以执行animate.css中的任何CSS3动画效果。

    jQuery插件scroll实现无缝滚动效果

    $(“.content”).easysroll({ //默认配置参数 direction: “left”, //滚动方向 left(向左)right(向右) top(向上) bottom(向下) 默认left numberr: “1”, //每一次滚动数量 默认是1 delays:”1000″,//完成一次...

    jquery页面滚动触发动画插件

    jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时,进入视口的元素会触发指定的CSS3动画。它和animate.css完美结合,可以执行animate.css中的任何CSS3动画效果。

    ngx-ui-scroll:Angular的无限虚拟滚动

    用户看不见的其他数据集元素将使用向上和向下的空白填充元素虚拟化,这些元素应提供具有一致滚动条参数的一致视口。 * uiScroll是一个结构指令,其作用类似于* ngFor,并且对集合中的每个项目渲染一次模板化元素。...

    用js实现控制内容的向上向下滚动效果

    [removed] iens6=document.all||document.getElementById ns4=document.layers //specify speed of scroll (greater=faster) var speed=10 if (iens6){ [removed](‘”container” style&gt;’) document.wr

    JQuery 滚动效果

    简洁易懂的代码,实现了图片或是文字向各个方面滚动的效果,有从右向左滚动,从左向右滚动,从上向下滚动及从下向上滚动。 整理后的代码只需求更改scroll.js中的speed值就可以轻松实现不同速度的滚动.

    scroll-direction-detection:JavaScript函数来检测用户的滚动方向

    编辑第17行,以便在用户向下滚动时应用所需的动作,功能,样式等。建于JavaScript作者阿什莉·哈特(Ashley Hartt) :bust_in_silhouette:执照此项目已获得MIT许可证的许可-有关详细信息,请参阅文件。致谢

    simple-scroll-hook:一个无jQuery的简单库,用于在滚动到视图中时将CSS类更改挂接到HTML元素

    用例示例包括在用户滚动到新部分时淡入/向上滑动文本,或者在元素向下滚动时使元素变粘。 两者都可以在示例项目页面上看到: : 安装 simple-scroll-hook可以用作: [removed]标记,创建一个window.scrollHook...

    实现屏幕滚动时模糊效果特效

    向下滚动,背景模糊变暗;向上滚动,背景模糊程度减淡,亮度提高。 自定义着色 动画效果 长度可变的滚动 测试环境:Xcode 5.0,iOS 7.0以上 ANBlurredTableView is a simple UITableView subclass for blurring and...

    voice-controllable-scrolling:这是使用javascript语音识别api进行的语音可控滚动

    go down scroll down或scroll down =&gt;向下滚动 go to half =&gt;滚动到页面的一半 scroll to top或go to top或go top =&gt;转到顶部 scroll to bottom或go to bottom或go bottom =&gt;转到底部 一些自定义命令: 6. scroll to...

    滚动选项卡「Scroll Tab」-crx插件

    向上滚动到上一个标签,向下滚动到下一个标签。当用户按住Ctrl和Shift按钮,然后按下PageUp或PageDown按钮时,选项卡将沿其方向移动其位置 PageUp到上一个选项卡,PageDown到下一个选项卡。当用户按住Ctrl和Shift...

    MSClass的JS包

    /*MSClass (Class Of Marquee Scroll通用不... + 向下、向右滚动 + 开始等待时间 + 连续滚动 * 调整时间单位 * 滚动误差 * 随机死循环 * 加强性能 * 程序优化 0.8.060829 翻屏不间断向上、向左滚动

Global site tag (gtag.js) - Google Analytics