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

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

  • 相关阅读:
    springboot之静态资源放行的方法(记录)
    FastDFS之图片上传
    FastDFS安装部署
    Docker安装MySQL5.7.25
    123qwe
    Spring3 MVC 注解(一)---注解基本配置及@controller和 @RequestMapping 常用解释
    jQuery可见性过滤选择器
    jQuery属性过滤选择器
    jQuery内容过滤选择器
    jQuery子元素过滤选择器
  • 原文地址:https://www.cnblogs.com/lxcong/p/5054316.html
Copyright © 2020-2023  润新知