zoukankan      html  css  js  c++  java
  • js判断滚动条滚动方向

    //第一种写法
            var a;
               
            function scroll( fn ) {
                var beforeScrollTop = document.body.scrollTop,
                    fn = fn || function() {};
                window.addEventListener("scroll", function() {
                    var afterScrollTop = document.body.scrollTop,
                        delta = afterScrollTop - beforeScrollTop;
                    if( delta === 0 ) return false;
                    fn( delta > 0 ? "down" : "up" );
                    beforeScrollTop = afterScrollTop;
                }, false);
            }
            scroll(function(direction) { 
                // console.log(direction);
                a =  direction;
            }); 
            // 第二种写法
            var a;
               
            function scroll( fn ) {
                var beforeScrollTop = document.body.scrollTop,
                    fn = fn || function() {};
                window.addEventListener("scroll", function() {
                    var afterScrollTop = document.body.scrollTop,
                        delta = afterScrollTop - beforeScrollTop;
                    if( delta === 0 ) return false;
                    a = fn( delta > 0 ? "down" : "up" );
                    beforeScrollTop = afterScrollTop;
                }, false);
            }
            scroll(function(direction) { 
                // console.log(direction);
                return direction;
            }); 
            // 第三种写法------这样写不知道fn这个函数的用意,那样写很明白就清楚fn的意思了,是执行完事件后的回调函数
    
            var a;
            var beforeScrollTop = document.body.scrollTop,
                fn = fn || function() {};
            window.addEventListener("scroll", function() {
                var afterScrollTop = document.body.scrollTop,
                    delta = afterScrollTop - beforeScrollTop;
                if( delta === 0 ) return false;
                fn( delta > 0 ? "down" : "up" );
                beforeScrollTop = afterScrollTop;
            }, false);
            function fn(direction) { 
                // console.log(direction);
                a = direction;
            };
    
            window.onscroll=function(){
                console.log(a);
            }

      今天在做类似于京东、天猫楼层切换效果的时候,利用循环实现,需要执行一个iscroll的方法,可是这个方法却只能在满足条件的时候执行一次,而不是每次滚动都能够实现,所以就想到要判断滚动条滚动方向,所以就搜了这么一段代码,因为涉及到js闭包的知识,本人就挂了,对闭包真的是不懂,多亏问了文杰同学,理解了这么一段代码,写下来,记录一下。

    (虽然最终这个效果并不需要判断滚动条滚动方向,是自己的逻辑发生了错误)。

  • 相关阅读:
    [转]C#里 泛型Where和 new()的使用
    测试
    C#中的static、readonly与const的比较
    将字符串格式化变为两位
    在VS中对字段进行包装
    安装mysql的心得
    关于mysql数据库的乱码问题
    timestamp的两个属性:CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP
    解决向数据库mysql插入double数据小数点不显示问题
    JDBOOK
  • 原文地址:https://www.cnblogs.com/lxcong/p/5054316.html
Copyright © 2011-2022 走看看