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

2020-12-07  本文已影响0人  squidbrother
概述

在不使用触摸事件的情况下,如何判断移动端、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);
    });
})();
上一篇下一篇

猜你喜欢

热点阅读