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

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

  • 相关阅读:
    openfalcon源码分析之transfer
    openfalcon源码分析之hbs
    openfalcon源码分析之Judge
    kong插件官方文档翻译
    Lua 学习
    GO语言heap剖析及利用heap实现优先级队列
    GO语言list剖析
    算法之python创建链表实现cache
    杂项之rabbitmq
    杂项之python利用pycrypto实现RSA
  • 原文地址:https://www.cnblogs.com/lxcong/p/5054316.html
Copyright © 2011-2022 走看看