滚动时移除悬停效果

Question

我一直在处理一个应用程序。页面上有多个组件。它们里面的内容是可滚动的。预期的功能是当我在组件内滚动时，应该禁用不同元素的悬停效果。在互联网上搜索后，我有一个可行的解决方案。我已经创建了一个像这样的 HoverDisabler 组件，

import React, {useEffect} from 'react';

export const HoverDisabler = ({children}) => {
  let timer = 0;
  useEffect(() => { 
     document.addEventListener('scroll', () => {
        clearTimeout(timer);
        if(!document.body.classList.contains('hoverDisabled')){
            document.body.classList.add('hoverDisabled');
        }
        timer = setTimeout(() => {
            document.body.classList.remove('hoverDisabled');
        },500);
     }, true); 
  }, []);
  return children;
}

hoverDisabled的css如下，

.hoverDisabled {
    pointer-events: 'none',
}

我正在像这样用HoverDisabler 包装我的根App 组件，

<HoverDisabler><App /></HoverDisabler>

现在在所有组件中，如果我开始滚动，hoverDisabled 类将添加到正文中，当我停止滚动时它会被删除。一切正常。我很好奇这是否是拥有此功能的正确方法？这种方法是否有任何缺点或由于我缺乏经验而忽略了一些问题？

Answer 1

由于滚动事件是一个昂贵的事件，您可以像这样在滚动事件上添加去抖动：

function debounce(method, delay) {
    clearTimeout(method._tId);
    method._tId= setTimeout(function(){
        method();
    }, delay);
}
function scrollFunction(){
   clearTimeout(timer);
    if(!document.body.classList.contains('hoverDisabled')){
        document.body.classList.add('hoverDisabled');
    }
    timer = setTimeout(() => {
        document.body.classList.remove('hoverDisabled');
    },500);
}
document.addEventListener('scroll', function() {
    debounce(scrollFunction, 100);
});

这肯定会优化您的代码，因为它只会触发滚动功能较少的次数。尽管您尝试解决的问题可能有其他方法，但我只是建议一种优化您当前代码的方法。