apphouse/dist/utils/dom/scrollToView.ts

Component library for React that uses observable state management and theme-able components.

import { merge } from '../obj/merge';

export interface ScrollToViewOptions {
  /**
   * The behavior property specifies whether to smoothly animate the scroll position,
   * @default 'smooth'
   */
  behavior?: 'auto' | 'smooth';
  /**
   * The block property specifies the vertical alignment of the element within its parent.
   * @default 'center'
   */
  block?: 'start' | 'center' | 'end' | 'nearest';
  /**
   * The inline property specifies the alignment of the element within its parent.
   * @default 'nearest'
   */
  inline?: 'start' | 'center' | 'end' | 'nearest';
}
/**
 * Helper function to scroll to a dom element
 * It just ensures that the element is visible in the viewport before calling scrollIntoView
 * @param id dom element ID to scroll to
 */
export const scrollToView = (id: string, options?: ScrollToViewOptions) => {
  const element = document.getElementById(id);
  if (element) {
    setTimeout(() => {
      element.scrollIntoView(
        merge(
          {},
          {
            behavior: 'smooth',
            block: 'center',
            inline: 'nearest'
          },
          options
        )
      );
    }, 10);
  }
};