bs-scrollspy wraps content with headings marked data-scrollspy and surfaces the currently visible section. Useful for sticky in-page navigation, table-of-contents highlights, or modal overlays.
<bs-scrollspy>
<h2 data-scrollspy>Section A</h2>
<p>Content for section A...</p>
<h2 data-scrollspy>Section B</h2>
<p>Content for section B...</p>
<h3 data-scrollspy>Subsection B1</h3>
<p>Content for subsection B1...</p>
</bs-scrollspy>
import { Component } from '@angular/core';
import { BsScrollspyComponent } from '@mintplayer/ng-bootstrap/scrollspy';
@Component({
selector: 'my-scrollspy-demo',
templateUrl: './my-scrollspy-demo.component.html',
imports: [BsScrollspyComponent],
})
export class MyScrollspyDemoComponent {}
A modal scroll body is its own scroll container — wrap its contents in bs-scrollspy and the directive picks the modal as its nearest-scrolling-ancestor target.
<bs-modal [(open)]="isModalOpen" [scrollable]="true">
<span *bsModalHeader>Title</span>
<bs-scrollspy>
<h3 data-scrollspy>Primary</h3>
<p>...</p>
<h3 data-scrollspy>Secondary</h3>
<p>...</p>
</bs-scrollspy>
</bs-modal>