时间戳

首页 > 解决方案 > 滚动时移除悬停效果

javascript - 滚动时移除悬停效果

问题描述

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

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

<HoverDisabler><App /></HoverDisabler>

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

标签： javascriptcssreactjsscrolldom-events

解决方案

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

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);
});

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

推荐阅读