eui documentation
  1. Directives
  2. EuiScrollHandlerElementDirective

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
Methods
Inputs
HostListeners

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