O scrollspy acompanha a rolagem de um container, atualiza o fragmento ativo e sincroniza menus simples ou hierárquicos.

Menu sincronizado

Os itens usam liScrollSpyItem e herdam o estado ativo do menu.

Ativo agora: {{ activeSection }}

Container observado

A diretiva abaixo observa a rolagem local do painel e emite activeChange.

Overview

Basic service

O serviço pode observar fragments por id, iniciar quando o container estiver pronto e publicar o fragmento ativo para qualquer menu ou painel auxiliar.

Essa versão usa um algoritmo configurável e leve, adequado para containers locais em dashboards, sidebars de documentação e áreas de preview.

Service

Imperative API

scrollTo() permite navegar programaticamente para um fragmento, enquanto observe() e unobserve() controlam quais seções participam do cálculo.

Isso cobre o caso de páginas com conteúdo montado dinamicamente ou quando você quer integrar o scrollspy com botões externos ao menu.

Directive

Directive sugar

liScrollSpy instancia o serviço no container, registra fragments filhos e faz o cleanup automaticamente quando a view some.

O fragmento ativo também pode ser refletido via active, active$ e (activeChange).

Items

Highlighting active items

Itens ligados por liScrollSpyItem recebem .active automaticamente e podem disparar a navegação do próprio fragmento ao clique.

Menus simples e aninhados usam a mesma base, então a API fica consistente para pills, listas laterais e índices de documentação.

Customization

Você pode trocar o algoritmo com processChanges, ajustar rootMargin e definir o comportamento padrão de rolagem via LiScrollSpyConfig.

Isso é útil quando o topo visual da área observada não coincide com o topo físico do container ou quando a página tem header fixo.

A API pública segue a mesma ideia do ng-bootstrap: container, fragments, items, menu hierárquico e um serviço compartilhado.

liScrollSpy instancia e exporta o controller do container.
liScrollSpyFragment define seções observadas com id único.
liScrollSpyItem sincroniza navegação e classe active.
liScrollSpyMenu propaga o ativo para a branch inteira em menus aninhados.
LiScrollSpyConfig fornece defaults para algoritmo e comportamento de rolagem.

<nav [liScrollSpyMenu]="spy" class="nav nav-pills flex-column">
  <button class="nav-link" type="button" liScrollSpyItem="overview">Overview</button>
  <button class="nav-link" type="button" [liScrollSpyItem]="[spy, 'items', 'directive']">Items</button>
</nav>

<div liScrollSpy #spy="liScrollSpy" (activeChange)="onActiveChange($event)">
  <section liScrollSpyFragment="overview">...</section>
  <section liScrollSpyFragment="service">...</section>
  <section liScrollSpyFragment="directive">...</section>
</div>