如何解决用偏移量反应滚动
我已设法使用 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 举报,一经查实,本站将立刻删除。