1

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

Section1 id =“标题”

Section2 id =“观众”

ETC

其中第 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>
4

0 回答 0