根据您提供的代码,我注意到您使用了Ant Design的Anchor组件来实现页面滚动时导航链接的高亮效果。然而,我注意到在滚动事件监听函数中存在一些问题。
首先,您将scrollChange函数绑定到了window对象上,并且没有在组件销毁时进行解绑。这可能导致事件处理函数多次注册和内存泄漏。为避免这种情况,您可以使用useEffect钩子函数来注册和注销滚动事件。
其次,目前您通过获取id为’hotelAnnouncement’的元素来获取scrollTop属性。但是,如果该元素不是可滚动的容器(例如div),那么它将没有scrollTop属性。正确的做法是将Anchor组件直接放置在可滚动的容器上,并监听该容器的scroll事件。
下面是对代码进行修改后的示例:
const [targetOffset, setTargetOffset] = useState(462);
const [scrollDistance, setScrollDistance] = useState(0);
useEffect(() => {
const handleScroll = () => {
const scrollContainer = document.getElementById('hotelAnnouncement');
if (scrollContainer) {
const distanceFromTop = scrollContainer.scrollTop;
console.log("滚动条距离顶部的距离:", distanceFromTop);
setScrollDistance(distanceFromTop);
}
};
const scrollContainer = document.getElementById('hotelAnnouncement');
if (scrollContainer) {
scrollContainer.addEventListener('scroll', handleScroll);
}
return () => {
if (scrollContainer) {
scrollContainer.removeEventListener('scroll', handleScroll);
}
};
}, []);
console.log(targetOffset, 'duhao___targetOffset');
return (
<>
<Card>
<Row>
<Col span={20} id="hotelAnnouncement" className="hotelAnnouncement">
{/* 页面内容 */}
</Col>
<Col span={4} style={{ position: "fixed", top: "110px", right: "120px" }}>
<Anchor affix={true} targetOffset={targetOffset}>
{/* 导航链接 */}
</Anchor>
</Col>
</Row>
</Card>
<OneHelp />
</>
);
在这个修改后的代码中,我们通过监听id为’hotelAnnouncement’的滚动容器元素的scroll事件,并将其scrollTop值设置到scrollDistance状态中。然后,您可以使用该状态来确定是否应该激活相应的导航链接。
请注意,在实际运行时,可能需要根据具体页面布局和样式对代码进行适当调整。同时,请确保容器元素具有固定的高度并且可以滚动。
希望这能帮助到您实现所需的效果!
内容由零声教学AI助手提供,问题来源于学员提问




