`
zccst
  • 浏览: 3322335 次
  • 性别: 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 ...

    JS控制滚动条自动向下滚动

    在JavaScript(JS)编程中,控制滚动条自动向下滚动是一种常见的需求,特别是在实时聊天、论坛或者日志更新等场景中,我们希望用户能够始终保持看到最新的内容。本篇将详细讲解如何利用JavaScript实现这一功能,以及...

    js文字滚动制作js scroll单排文字滚动向上间歇滚动

    在这个场景中,"js文字滚动制作js scroll单排文字滚动向上间歇滚动"涉及到的是使用JavaScript实现一种常见的网页特效——文字滚动。 文字滚动是一种常见的网页动态效果,它可以使页面上的文本按照设定的方向(如...

    jQuery带按钮向上滚动向下滚动代码.zip

    jQuery带按钮向上滚动向下滚动代码是基于流行的JavaScript库jQuery实现的一种网页滚动效果。这个功能通常用于网站页面,尤其是内容较多的页面,以便用户能够轻松地浏览页面内容而无需手动滚动鼠标或触摸屏幕。这种...

    JQ 判断鼠标向上滚动并浮动导航

    当用户向下滚动并且导航栏离开屏幕顶部时,我们可以恢复其原始样式,使导航栏返回到正常位置。 为了实现这一功能,可以编写如下jQuery代码示例: ```javascript $(document).ready(function() { var $nav = $('#...

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

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

    文字列表无缝向上滚动

    【文字列表无缝向上滚动】是一种常见的网页动态效果,它能够为用户提供流畅的视觉体验,尤其在展示大量文本信息时,如新闻更新、公告或者产品列表等。这种效果通过编程技术实现,使得文字列表在到达顶部时不是突然...

    JS不间断向下滚动.rar

    "JS不间断向下滚动"通常是指利用JavaScript实现页面内容持续自动滚动的效果,这种效果常见于新闻滚动、公告滚动等应用场景,能够使用户在不手动操作的情况下看到不断更新的信息。 在实现JS不间断向下滚动的过程中,...

    Scroll-Animation:向下滚动下一个元素时将出现滚动动画

    这种技术允许用户在向下滚动页面时,内容以平滑、动态的方式呈现,增加了视觉吸引力。本文将深入探讨如何实现"向下滚动下一个元素时将出现滚动动画"的效果,主要涉及HTML、CSS和JavaScript。 首先,HTML是网页的...

    jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    在`单行滚动.html`中,jQuery可能使用了`.slideUp()`和`.slideDown()`方法来模拟向上或向下的滚动效果。这些方法会改变元素的高度,从而实现内容的隐藏和显示。同时,通过设置定时器(如`setInterval`)来周期性地...

    js页面向下滚动浮动层

    在网页设计中,"js页面向下滚动浮动层"是一种常见的用户体验优化技术,它使得特定的元素(如导航菜单)在用户滚动页面时始终保持在屏幕的可见区域。这种效果可以增加用户的交互性和易用性,特别是在内容丰富的长页面...

    简单原生js文字向上滚动消息框代码

    然后,创建一个定时器(`setInterval`函数),在每次间隔时间后更新容器的`top`值,使其向下移动一段距离,从而模拟向上滚动的效果。当容器的顶部到达某个位置时,我们可以将其`top`值重置为初始值,实现无缝循环...

    jQuery实现网站中公告上下无缝滚动,marquee

    接着定义了一个`scrollContent`函数,该函数通过`animate`方法平滑地将公告内容向上滚动,当滚动到底部时,将其恢复到初始位置并再次调用自身,形成无缝循环。 请注意,`5000`是动画的持续时间,单位为毫秒,可以...

    jquery检测滚动距离插件Scroll Detection

    2. **方向检测**:插件可以区分向上滚动和向下滚动,这样你可以根据滚动方向执行不同的操作。 3. **防抖动优化**:为了提高性能,插件可能包含了防抖(debounce)或节流(throttle)机制,防止在用户快速滚动时频繁...

    wpf listbox 滚动事件的判断

    在处理滚动事件时,我们需要根据具体需求来判断滚动的方向(向上或向下)以及是否到达顶部或底部。在上述代码中,我们检查了垂直偏移量`VerticalOffset`,并与可视区域高度`ExtentHeight`和视口高度`ViewportHeight`...

    js产品图片无缝滚动代码向左和向上图片无缝滚动代码

    如果向上滚动,需要调整`top`属性。 ```javascript var index = 0; var container = document.getElementById('scroll-container'); var imagesDOM = container.getElementsByTagName('img'); function ...

    jQuery滚动隐藏/显示顶部标题

    3. **滚动方向判断**:我们需要判断用户是向上滚动还是向下滚动。这可以通过比较当前滚动位置(`$(window).scrollTop()`)和上一次滚动位置来实现。如果当前滚动位置大于上一次位置,说明是向下滚动,反之则是向上...

    实现ScrollView滑动时标题栏的隐藏效果(我自己写了例子)

    3. **计算滚动距离**:在`onScrollChange`方法中,我们需要比较当前滚动位置`scrollY`和上一次滚动位置`oldScrollY`,判断是向上还是向下滚动。如果`scrollY &gt; oldScrollY`,表示正在向下滚动,此时可以逐渐隐藏标题...

Global site tag (gtag.js) - Google Analytics