页面滚动时禁用其中的:hover事件

在滚动页面时，若光标恰巧经过了带有:hover伪类的元素时，在滚动的过程中就可能会导致重绘或回流，当用户在页面反复上下横跳时，为了提高滚动时的性能，往往会在进行滚动事件时禁用包括hover在内的鼠标事件。

这里就以hover事件为例，在CSS文件中定义一个类名为disable-hover：

.disable-hover {
    pointer-events: none;
}

pointer-events属性为none时，会禁用包括hover在内的鼠标事件。

在JS文件中，全局添加监听事件，滚动时，给页面的body添加上该样式，滚动结束后再移除该属性。

window.addEventListener('scroll', () => {
    let body = document.body, timer;
    clearTimeout(timer);
    if(!body.classList.contains('disable-hover')) {
      body.classList.add('disable-hover');
    }
    timer = setTimeout(() => {
      body.classList.remove('disable-hover');
    }, 500);
},false);

方法简单，但是不是万能的，不同的使用场景下该方法不一定都适用，而且现如今的浏览器基本都有针对于快速滚动hover绘制的性能保护，有时候不一定需要多此一举。