根据你提供的代码,我注意到你在监听滚动事件时使用了window.addEventListener('scroll', scrollChange, true),然后在清除监听器时使用了window.addEventListener('scroll', scrollChange, false)。
这是一个错误的用法,正确的写法应该是使用removeEventListener来清除事件监听器。可以将返回的函数作为清理函数传递给useEffect的返回值。
另外,在每次渲染时都会创建新的scrollChange函数,并且每次都添加和删除相同的事件监听器可能会导致一些问题。建议只在组件挂载和卸载时执行一次事件监听器的添加和移除操作。
下面是修改后的代码示例:
const myRef = useRef(null);
const [targetOffset, setTargetOffset] = useState(462);
useEffect(() => {
const handleScroll = () => {
const scrollDistance = document.getElementById('hotelAnnouncement')?.scrollTop;
if (scrollDistance > 1000) {
setTargetOffset(1000);
} else {
setTargetOffset(462);
}
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []); // 注意空数组以确保仅在组件挂载和卸载时运行
console.log(targetOffset, 'duhao___targetOffset');
// 其他组件内容...
请尝试以上修改后查看是否解决了Anchor高亮未变化的问题。
内容由零声教学AI助手提供,问题来源于学员提问




