滚动时移除悬停效果
Remove hover effects when scrolling
我一直在处理一个应用程序。页面上有多个组件。它们里面的内容是可滚动的。预期的功能是当我在组件内部滚动时,应该禁用不同元素上的悬停效果。在互联网上搜索后,我有一个可行的解决方案。我创建了一个这样的 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
class 会添加到正文中,当我停止滚动时它会被删除。一切都运行良好。我很好奇这是否是拥有此功能的正确方法?这种方法有什么缺点或者是我经验不足而忽略了一些问题吗?
由于滚动事件是一个昂贵的事件,您可以像这样在滚动事件上添加去抖:
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);
});
这肯定会优化您的代码,因为它只会触发滚动功能的次数较少。尽管可能有其他方法可以解决您要解决的问题,但我只是建议一种优化当前代码的方法。
我一直在处理一个应用程序。页面上有多个组件。它们里面的内容是可滚动的。预期的功能是当我在组件内部滚动时,应该禁用不同元素上的悬停效果。在互联网上搜索后,我有一个可行的解决方案。我创建了一个这样的 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
class 会添加到正文中,当我停止滚动时它会被删除。一切都运行良好。我很好奇这是否是拥有此功能的正确方法?这种方法有什么缺点或者是我经验不足而忽略了一些问题吗?
由于滚动事件是一个昂贵的事件,您可以像这样在滚动事件上添加去抖:
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);
});
这肯定会优化您的代码,因为它只会触发滚动功能的次数较少。尽管可能有其他方法可以解决您要解决的问题,但我只是建议一种优化当前代码的方法。