File

packages/components/directives/eui-scroll-handler.directive.ts

Description

Directive toggling CSS class on app header when scrolling past a threshold. Monitors window scroll position and adds 'shrink-header-active' class to app wrapper. Requires specific DOM structure with 'app-wrapper' and 'app-header' element IDs. Typically used for sticky headers that shrink or change appearance on scroll.

<div id="app-wrapper">
  <header id="app-header">Header content</header>
  <main [euiScrollHandler]="true">Main content</main>
</div>

Accessibility

• Visual feedback for scroll position
• Does not affect keyboard navigation or screen readers
• Ensure header remains accessible in both states

Notes

• Requires elements with IDs 'app-wrapper' and 'app-header'
• Class 'shrink-header-active' added when scrolled past header height
• Scroll threshold automatically calculated from header height
• Set euiScrollHandler to false to disable

Implements

OnInit