### 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.

Example :

    <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`

### Metadata

Selector | `[euiScrollHandler]`

### Index

###### Properties

- appHeaderHeight
- navIsFixed

###### Methods

- onWindowScroll

###### Inputs

- euiScrollHandler

###### HostListeners

- window:scroll

### Inputs

euiScrollHandler
Type : `boolean`
Default value : `false`

### HostListeners

window:scroll

### Methods

onWindowScroll
`onWindowScroll()`
Decorators : `@HostListener('window:scroll', undefined)`
Returns : `void`

### Properties

appHeaderHeight
Type : `number`
Default value : `0`

navIsFixed
Type : `unknown`
Default value : `false`

# results matching ""

# No results matching ""