Fixes the scroll position of an element when clicked on it or when it gained focus through keyboard action like the "tab" key. Observes all child elements or the child elements with the class "targetClass" if set.

If a click on an element triggers an animation or when a element gains focus, the element might move out of the view. This component scrolls the element back into view.

If the fix is triggered through a click, the element is scrolled back to the same position when the click event occurred.

If the fix is triggered through a focus event, the fixed position is defined through "focusPosition" and "focusOffset".

Properties

clickDelay: number = 200

The time span in milliseconds after the scroll position of the clicked element is checked.

disableClick: boolean

Disables the click fix.

disableFocus: boolean

Disables the focus fix.

disabled: boolean

Disables the component.

focusDelay: number = 500

The time span in milliseconds after the scroll position of the focused element is checked. Only elements which gain focus through a keyboard action (usually through the "tab" key) are considered.

focusOffset: number = 0

An offset to the "focusPosition" in px.

focusPosition: "top" | "middle" | "bottom" = 'middle'

The scroll fix position a focused element is aliened with.

hyloScrollShiftFix: EventEmitter<HTMLHyloScrollShiftFixElement>

Fires at the beginning of the delay. Emits this component. Makes it possible to "stop()" the fix.

noScroll: boolean

The scroll fix is applied through a smooth scrolling. This disables the smooth scrolling.

noScrollClick: boolean

The scroll fix is applied through a smooth scrolling. This disables the smooth scrolling for the click fix.

noScrollFocus: boolean

The scroll fix is applied through a smooth scrolling. This disables the smooth scrolling for the focus fix.

targetClass: string

If not set, the fix is applied to all child elements. If set, the fix is applied to the next ancestor of the triggering element with this class and which is still a child element of this component.

threshold: number = 100

Applies the scroll fix only if the element moved at least as much as the "threshold" pixel for a click fix or is as much or more away from the "focusPosition" for a focus fix.

Methods

  • Stops the execution of a scroll fix in progress.

    Returns Promise<void>

Generated using TypeDoc