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閉包的知識,本人就掛了,對閉包真的是不懂,多虧問了文傑同窗,理解了這麼一段代碼,寫下來,記錄一下。閉包

(雖然最終這個效果並不須要判斷滾動條滾動方向,是本身的邏輯發生了錯誤)。函數

相關文章
相關標籤/搜索