角度 5 滚动间谍或页面滚动功能 - 问题跳转到模态部分

Question

有没有人在 Angular 5 中实现过 scrollspy 或页面滚动功能？我的目标是在模态中创建这样的东西：https://getbootstrap.com/docs/4.0/components/scrollspy/。但是，如果我单击导航栏上的部分链接，页面将跳转到 localhost：9000/#sectionName("sectionName"是该部分的 id(。我需要页面停留在模态上并跳转到模态中的相应部分。我不确定要研究什么才能做到这一点。提前谢谢。

Answer 1

您需要维护两个div。 1. 外部分区(主分区( 2.可以滚动的div(可滚动的div(。然后需要找到应该滚动顶部的div(部分名称div(。

然后，您可以轻松地滚动它找到滚动顶部位置并使用 animate 平滑滚动它。

const masterContainerOffset = $("#main-div").offset().top;
const pos = $("#" + sectionName).offset().top - 80 - masterContainerOffset;
const targetScroll = $("#scrollable-div").scrollTop() + pos;
$("#scrollable-div").animate({
scrollTop: targetScroll
}, 1000);