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

2017-07-28 12:02:53

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

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

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

Js代码  收藏代码

  1. $(document).ready(function(){  

  2.     var p=0,t=0;  

  3.   

  4.     $(window).scroll(function(e){  

  5.             p = $(this).scrollTop();  

  6.               

  7.             if(t<=p){//下滚  

  8.                 .......  

  9.             }  

  10.               

  11.             else{//上滚  

  12.                 .......  

  13.             }  

  14.             setTimeout(function(){t = p;},0);         

  15.     });  

  16. });  



  • 2020-04-17 14:06:29

    图片解释EaseIn,EaseOut,EaseInOut

    1.EaseIn:即缓动发生在入口处,也就是刚开始的时候。 2.EaseOut:即缓动发生在出口处,也就是结束之前。 3.EaseInOut:就是两边都有缓动了.

  • 2020-04-21 14:47:13

    Redis危险命令重命名、禁用

    flushdb,清空数据库 flushall,清空所有记录,数据库 config,客户端连接后可配置服务器 keys,客户端连接后可查看所有存在的键

  • 2020-04-21 15:13:15

    redis 简单使用

    Redis和Memcached类似,也属于k-v数据存储 Redis官网 https://redis.io支持更多value类型,除了和string外,还支持hash、lists(链表)、sets(集合)和sorted sets(有序集合) Redis是可以把数据存储在磁盘上的并且使用了两种文件格式:全量数据(RDB)和增量请求(aof)。一般叫做redis持久化 全量数据格式是把内存中的数据写入磁盘,便于下次读取文件进行加载。

  • 2020-04-21 15:14:20

    SpringBoot + Redis:基本配置及使用

    # Redis数据库索引(默认为0) spring.redis.database=0# Redis服务器地址 spring.redis.host=127.0.0.1# Redis服务器连接端口 spring.redis.port=6379# Redis服务器连接密码(默认为空) spring.redis.password=# 连接池最大连接数(使用负值表示没有限制) spring.redis.jedis.pool.max-active=20# 连接池最大阻塞等待时间(使用负值表示没有限制) spring.redis.jedis.pool.max-wait=-1# 连接池中的最大空闲连接 spring.redis.jedis.pool.max-idle=10# 连接池中的最小空闲连接 spring.redis.jedis.pool.min-idle=0# 连接超时时间(毫秒) spring.redis.timeout=1000

  • 2020-04-22 10:49:10

    css按钮特效大全

    打开这个连接,你会发现很多按钮动画脚本,基本这些动画就够大家用的了。

  • 2020-04-27 09:26:49

    transform与transition区别与详解

    对元素进行移动、缩放、转动、拉长或拉伸。 方法:translate(): 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数 有两个div,它们的css样式如下,transition:过渡 元素从一种样式逐渐改变为另一种的效果 有一个div,它的css样式如下: