Question

我已设法使用 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>

用偏移量反应滚动

0 个答案: