如何让ngbScrollSpy适配sticky top列表及无高度元素？

要让ngbScrollSpy在这种场景下正常工作，核心是让它监听整个窗口的滚动事件，而非内容容器的滚动。具体调整方案如下：

关键修改点 #

• 给ngbScrollSpy添加scrollWindow="true"属性，将滚动监听目标切换为浏览器窗口
• 调整rootMargin值，适配sticky导航的高度，确保导航项的激活时机准确

修改后的完整代码 #

<div class="row">
    <div class="col-4">
        <div id="list-example" class="list-group sticky-top">
            <button type="button" class="list-group-item list-group-item-action" [ngbScrollSpyItem]="[spy, 'items-1']">
                1 - button
            </button>
            <button type="button" class="list-group-item list-group-item-action" [ngbScrollSpyItem]="spy" fragment="items-2">
                2 - button
            </button>
            <a type="button" class="list-group-item list-group-item-action" [ngbScrollSpyItem]="spy" fragment="items-3">
                3 - link no href
            </a>
            <a
                class="list-group-item list-group-item-action"
                href
                [class.active]="spy.active === 'items-4'"
                (click)="spy.scrollTo('items-4'); $event.preventDefault()"
            >
                4 - link no directive
            </a>
            <a routerLink="." class="list-group-item list-group-item-action" [ngbScrollSpyItem]="spy" fragment="items">
                5 - routerLink example
            </a>
        </div>
    </div>
    <div class="col-8">
        <div ngbScrollSpy #spy="ngbScrollSpy" scrollWindow="true" rootMargin="80px 0px 0px 0px" class="bg-light p-3 rounded-2 mb-3">
            <h4 ngbScrollSpyFragment="items-1">First heading</h4>
            <p>
                Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
                master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
                keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
                salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
            </p>
            <h4 ngbScrollSpyFragment="items-2">Second heading</h4>
            <p>
                Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
                master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
                keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
                salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
            </p>
            <h4 ngbScrollSpyFragment="items-3">Third heading</h4>
            <p>
                Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
                master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
                keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
                salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
            </p>
            <h4 ngbScrollSpyFragment="items-4">Fourth heading</h4>
            <p>
                Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
                master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
                keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
                salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
            </p>
        </div>
    </div>
</div>

原理说明 #

默认状态下ngbScrollSpy监听的是自身容器的滚动事件，但你的内容容器未设置固定高度，不会产生滚动条，因此无法触发位置检测。设置scrollWindow="true"后，它会监听浏览器窗口的滚动，此时页面滚动时就能正确识别各个ngbScrollSpyFragment的位置，配合sticky导航实现实时高亮。调整rootMargin是为了让导航项的激活时机与sticky导航的位置匹配，避免高亮延迟或提前。

内容的提问来源于stack exchange，提问作者Sean