美文网首页
scrollTop判断向上滑动还是向下滑动

scrollTop判断向上滑动还是向下滑动

作者: squidbrother | 来源:发表于2020-12-07 20:27 被阅读0次
    概述

    在不使用触摸事件的情况下,如何判断移动端、PC端,页面滚动的方向
    1.主要通过scrollTop的前后比对,借助JQuery的库方便些
    2.因为涉及到监测scroll事件,所以还需要做下防抖的工作
    3.在IOS端,由于页面本身存在弹性滚动的浏览器默认渲染问题,所以需要修正下BUG
    即在一个极限高度上,进行判断(_yArr.length>=2)

    (function(){
        var iTimer = null;
        var _yArr = [];
        var _win = $(window);
        _win.on('scroll',function(e){
            _yArr.push(_win.scrollTop());
            clearTimeout(iTimer);
            setTimeout(function(){
                if(_yArr.length>=2){
                    var _lth = _yArr.length;
                    
                    if(_yArr[_lth-1]>_yArr[0]){
                        // document.title = '向下';
                        
                        //IOS 弹性滚动默认行为导致的问题
                        if(_win.scrollTop()<_win.height()/2){ return false; }
                        
                        //做你想做的操作...
                    }else{
                        // document.title = '向上';
                        //做你想做的操作...
                    }
                    _yArr = [];
                };
            },100);
        });
    })();
    

    相关文章

      网友评论

          本文标题:scrollTop判断向上滑动还是向下滑动

          本文链接:https://www.haomeiwen.com/subject/rnrmqktx.html