ZBLOG

const [targetOffset,setTargetOffset]=useState(462) // useEffect(() => { // console.log(window.innerHeight,'duhao____top') // setTargetOffset(window.innerHeight/2) // }, [window.innerHeight]); const [windowHeight, setWin...

根据您提供的代码,我注意到您使用了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助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=13247

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?