用偏移量反应滚动

问题描述

我已设法使用 hashlink 在 react 中实现滚动，但遇到了问题。我有一个粘性菜单，滚动将转到所需的组件，但它会被菜单阻止。我需要一个 48px 的偏移量。我试图用 hashlink 来实现，但我得到了它不是一个函数的错误，你们能帮我吗？对于上下文，包括带有链接的标题在内的每个部分都是一个单独的组件，我的布局是：

Section1 id = "header"

Section2 id = "观众"

等

其中第 1 部分 = 带有链接的标题。这就是我使用“/#”的原因，因为我为组件设置了一个 id 以使链接工作

无偏移滚动：

 state = {
        page : [
            {
                name : 'About',linkTo : '/#about'
            },{
                name : 'Features',linkTo : '/#audiance'
            },{
                name : 'Contact',linkTo : '/#contact'
            }
        ]
    };

    populateLinks = (item,i) => (
        <li className="nav-item" key = {i} > <hashlink smooth className="nav-link" to={item.linkTo} >{item.name}</hashlink> </li>
    )

部分实现偏移但有错误：

   scrollWidthOffset = (el) => {
        const yCoordinate = el.getBoundingClientRect().top + window.pageYOffset;
        const yOffset = -80; 
        window.scrollTo({ top: yCoordinate + yOffset,behavior: 'smooth' }); 
    }
    


    populateLinks = (item,i) => (
        <li className="nav-item" key = {i} > <hashlink smooth className="nav-link" to={item.linkTo} scroll={el => this.scrollWithOffset(el)}>{item.name}</hashlink> </li>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-router react-router-dom reactjs reactjs