File
Description
Directive automatically scrolling to host element on initialization or click.
Provides animated scroll with configurable duration, offset, and easing.
Supports conditional scrolling and callbacks before/after scroll.
Scroll on init:
Example :<div euiSmoothScroll [scrollIf]="shouldScroll">Content</div>
Scroll on click:
Example :<div euiSmoothScroll [scrollOnClick]="true" [duration]="500">Click to scroll here</div>
Accessibility
- Smooth scroll provides better UX than instant jump
- Use scrollIf to conditionally enable scrolling
- Consider reduced motion preferences for accessibility
Notes
- Scrolls to host element automatically on init (unless scrollIf is false)
- Set scrollOnClick to true for click-triggered scrolling
- Default duration is 800ms
- Offset adjusts final scroll position
- Supports scrolling within specific container via containerId
- middleAlign centers element in viewport
Implements
Index
Methods
|
|
|
Inputs
|
|
|
HostListeners
|
|
|
|
callbackBefore
|
Type : any
|
HostListeners
|
click
|
Arguments : '$event.target'
|
Methods
|
onClick
|
onClick(target: unknown)
|
Decorators :
@HostListener('click', ['$event.target'])
|
Parameters :
| Name |
Type |
Optional |
| target |
unknown
|
No
|
|