Angular 5 scrollspy 或页面滚动功能 - 跳转到模态部分的问题

Question

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

Answer 1

您需要维护两个 div。 1. outer div (main-div) 2. 可滚动的Div(scrollable-div)。然后需要找到应该滚动到顶部的 div(sectionName div).

然后你就可以很容易地滚动它找到滚动顶部的位置并使用动画来平滑地滚动它。

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);

Angular 5 scrollspy 或页面滚动功能 - 跳转到模态部分的问题

Angular 5 scrollspy or page scroll feature - issue jumping to section on modal

scrollspy

angular