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闭包的知识,本人就挂了,对闭包真的是不懂,多亏问了文杰同学,理解了这么一段代码,写下来,记录一下。

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

posted @ 2015-12-17 15:28  自由行走的猪  阅读(16144)  评论(1编辑  收藏  举报