ng-bootstrap scrollspy整页滚动不生效问题求助（无法设置高度）

问题场景 #

使用ng-bootstrap的ngbScrollSpy指令，按官方文档配置后，滚动页面时导航的激活项无法自动切换。相关代码如下：

<div>
    <div class="sticky-top">
        <ul class="nav menu-sidebar">
            <li >
                <a [ngbScrollSpyItem]="[spy, 'about']">About</a>
            </li>
            <li >
                <a [ngbScrollSpyItem]="spy" fragment="schedule">Schedule</a>
            </li>
            <li >
                <a [ngbScrollSpyItem]="spy" fragment="hotel">Information about the hotel</a>
            </li>
        </ul>
    </div>

    <div ngbScrollSpy #spy="ngbScrollSpy" >
        <section ngbScrollSpyFragment="about">
            <h3>About</h3>
            <p>{{some long long text and content}}</p>
        </section>
        <section ngbScrollSpyFragment="schedule">
            <h3>Schedule</h3>
            <p>{{some long long text and content}}</p>
        </section>
        <section ngbScrollSpyFragment="hotel">
            <h3>Information about the hotel</h3>
            <p>{{some long long text and content}}</p>
        </section>
    </div>
</div>

经排查，问题根源是未给ngbScrollSpy所在的div设置height属性，但该区块需要覆盖整页，且导航使用sticky-top，无法设置固定高度，需通过窗口滚动时刷新ScrollSpy或其他方案解决。

解决方案 #

方案一：监听窗口滚动手动刷新ScrollSpy #

在组件中监听窗口滚动事件，调用ScrollSpy的refresh()方法更新状态：

1. 组件TS代码：

import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { NgbScrollSpy } from '@ng-bootstrap/ng-bootstrap';
import { Subscription, fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-my-scrollspy',
  templateUrl: './my-scrollspy.component.html',
  styleUrls: ['./my-scrollspy.component.css']
})
export class MyScrollspyComponent implements OnInit, OnDestroy {
  @ViewChild('spy') scrollSpy!: NgbScrollSpy;
  private scrollSubscription!: Subscription;

  ngOnInit() {
    // 监听窗口滚动，防抖避免频繁触发
    this.scrollSubscription = fromEvent(window, 'scroll')
      .pipe(debounceTime(100))
      .subscribe(() => {
        this.scrollSpy.refresh();
      });
  }

  ngOnDestroy() {
    // 销毁订阅防止内存泄漏
    this.scrollSubscription.unsubscribe();
  }
}

2. 说明：通过debounceTime(100)减少刷新频率，避免性能问题；组件销毁时记得取消订阅。

方案二：CSS设置ScrollSpy容器自适应高度 #

通过CSS让ScrollSpy容器占满剩余页面高度，同时保持导航sticky：

/* 父容器设置flex布局 */
div:first-child {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Sticky导航不占flex空间 */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ScrollSpy容器占满剩余高度 */
[ngbScrollSpy] {
  flex: 1;
  overflow-y: auto;
}

说明：这种方式让容器拥有可滚动区域，同时自适应页面高度，不需要手动刷新ScrollSpy，是更符合组件设计的方案。

方案三：使用基于窗口的ScrollSpy #

如果内容直接在窗口滚动，可将ScrollSpy绑定到窗口而非容器：

1. 修改模板：

<div class="sticky-top">
    <ul class="nav menu-sidebar">
        <li >
            <a [ngbScrollSpyItem]="[spy, 'about']">About</a>
        </li>
        <li >
            <a [ngbScrollSpyItem]="spy" fragment="schedule">Schedule</a>
        </li>
        <li >
            <a [ngbScrollSpyItem]="spy" fragment="hotel">Information about the hotel</a>
        </li>
    </ul>
</div>

<!-- 移除容器的ngbScrollSpy，改为绑定窗口 -->
<div>
    <section id="about" ngbScrollSpyFragment="about">
        <h3>About</h3>
        <p>{{some long long text and content}}</p>
    </section>
    <section id="schedule" ngbScrollSpyFragment="schedule">
        <h3>Schedule</h3>
        <p>{{some long long text and content}}</p>
    </section>
    <section id="hotel" ngbScrollSpyFragment="hotel">
        <h3>Information about the hotel</h3>
        <p>{{some long long text and content}}</p>
    </section>
</div>

2. 组件TS代码：

import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { NgbScrollSpy, WindowScrollSpyService } from '@ng-bootstrap/ng-bootstrap';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-my-scrollspy',
  templateUrl: './my-scrollspy.component.html',
  styleUrls: ['./my-scrollspy.component.css'],
  providers: [WindowScrollSpyService] // 使用窗口滚动服务
})
export class MyScrollspyComponent implements OnInit, OnDestroy {
  @ViewChild('spy') scrollSpy!: NgbScrollSpy;
  private scrollSubscription!: Subscription;

  ngOnInit() {
    // 可选：监听激活项变化
    this.scrollSubscription = this.scrollSpy.activeChange.subscribe(active => {
      console.log('当前激活区块:', active);
    });
  }

  ngOnDestroy() {
    this.scrollSubscription.unsubscribe();
  }
}

说明：这种方式直接基于窗口滚动监听，不需要给容器设置高度，适合整页滚动的场景。

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