javascript - 当页面在滚动的时候. 把:hover和鼠标事件干掉.防止误触发带来的rendering，使页面滚动不流畅！

Question

我的做法是. 当页面滚动的时候给html加个css： pointer-events:none;

现在碰的问题是当页面不滚动的时候如何把这个css:pointer-events:none 去掉....

我是这样做的..

$(document).scroll(function(){
        $('body').addClass('pointer-none').delay(500).queue(function(next){
            $('body').removeClass('pointer-none');
            next();
        });
    });

不过上述每次滚动都会触发这个removeclass. 我想要的是连续滚动中间没有停止滚动的话是不要触发这个removeclass的.

停止滚动的话才触发这个removeclass..

Answer 1

你可以设置一个超时定时器
在timeout设置的时间范围内如果发生触发了scroll事件，那么就将之前设置的定期器取消
如果在指定的时间范围内没有滚动事件触发，那么执行removeClass的操作

var timer,timeout=1000;
$(document).scroll(function(){
    if(!timer){
        $('body').addClass('pointer-none');
    }else{
        clearTimeout(timer);
        timer=null;
    }
    timer=setTimeout(function(){
        $('body').removeClass('pointer-none');
        next();
        timer=null;
    }, timeout);
        
});