# EuiScrollHandlerDirective

**Type:** directive



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.

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


**Selector:** `[euiScrollHandler]`

## Inputs
- **euiScrollHandler**: `boolean` -