### File

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

### Description

Directive toggling CSS class on any element when scrolling past a custom threshold. More flexible alternative to euiScrollHandler with configurable element ID, class, and height. Monitors window scroll and applies specified class when threshold exceeded.

Example :

    <div euiScrollHandlerElement="myNav"
         toggleClass="nav-fixed"
         [toggleActiveHeight]="100">
      Navigation content
    </div>

### Accessibility

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

### Notes

- Element ID specified via euiScrollHandlerElement input
- CSS class specified via toggleClass input
- Scroll threshold specified via toggleActiveHeight input (in pixels)
- Class added when scroll position exceeds toggleActiveHeight

### Metadata

Selector | `[euiScrollHandlerElement]`

### Index

###### Properties

- Public navIsFixed

###### Methods

- onWindowScroll

###### Inputs

- euiScrollHandlerElement
- toggleActiveHeight
- toggleClass

###### HostListeners

- window:scroll

### Inputs

euiScrollHandlerElement
Type : `string`

toggleActiveHeight
Type : `number`

toggleClass
Type : `string`

### HostListeners

window:scroll

### Methods

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

### Properties

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

# results matching ""

# No results matching ""