### File

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

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

`OnInit`

### Metadata

Selector | `[euiSmoothScroll]`

### Index

###### Methods

- onClick

###### Inputs

- callbackAfter
- callbackBefore
- containerId
- duration
- easing
- middleAlign
- offset
- scrollIf
- scrollOnClick

###### HostListeners

- click

### Inputs

callbackAfter
Type : `any`

callbackBefore
Type : `any`

containerId
Type : `string`

duration
Type : `number`

easing
Type : `string`

middleAlign
Type : `any`

offset
Type : `number`

scrollIf
Type : `boolean`

scrollOnClick
Type : `boolean`

### HostListeners

click
Arguments : `'$event.target'`

### Methods

onClick
`onClick(target: unknown)`
Decorators : `@HostListener('click', ['$event.target'])`

Parameters :

Name | Type | Optional
target | `unknown` | No

Returns : `void`

# results matching ""

# No results matching ""