How to use compute-scroll-into-view - 7 common examples

if (
    isOptionsObject>(options) &&
    typeof options.behavior === 'function'
  ) {
    return options.behavior(targetIsDetached ? [] : compute(target, options))
  }

  // Don't do anything if using a standard behavior on an element that is not in the document
  if (targetIsDetached) {
    return
  }

  // @TODO see if it's possible to avoid this assignment
  const computeOptions = getOptions(options)
  return defaultBehavior(
    compute(target, computeOptions),
    computeOptions.behavior
  )
}

function scrollIntoView(target: Element, options?: Options | boolean) {
  // Browsers treats targets that aren't in the dom as a no-op and so should we
  const targetIsDetached = !target.ownerDocument!.documentElement!.contains(
    target
  )

  if (
    isOptionsObject>(options) &&
    typeof options.behavior === 'function'
  ) {
    return options.behavior(targetIsDetached ? [] : compute(target, options))
  }

  // Don't do anything if using a standard behavior on an element that is not in the document
  if (targetIsDetached) {
    return
  }

  // @TODO see if it's possible to avoid this assignment
  const computeOptions = getOptions(options)
  return defaultBehavior(
    compute(target, computeOptions),
    computeOptions.behavior
  )
}

export const scrollIntoView = (
  element: Nullable | null | undefined,
  menuElement: Nullable,
) => {
  if (!element || !menuElement) {
    return;
  }

  const actions = computeScrollIntoView(element, {
    boundary: menuElement,
    block: 'nearest',
    scrollMode: 'if-needed',
  });

  actions.forEach(({ el, top, left }) => {
    el.scrollTop = top;
    el.scrollLeft = left;
  });
};

React.useEffect(() => {
    const target = refs.current!.get(value);
    if (target) {
      const actions = computeScrollIntoView(target, {
        block: "center",
        inline: "center",
        boundary: boundary.current
      });

      if (!actions.length) {
        return;
      }

      const { left } = actions[0];

      scrollRef.current!.scrollTo(left);
    }
  }, [value]);

function scrollIntoView(node: HTMLElement, menuNode: HTMLElement) {
  if (node === null) {
    return;
  }

  const actions = computeScrollIntoView(node, {
    boundary: menuNode,
    block: "nearest",
    scrollMode: "if-needed",
  });
  actions.forEach(({ el, top, left }) => {
    el.scrollTop = top;
    el.scrollLeft = left;
  });
}

function scrollIntoView(node, menuNode) {
  if (node === null) {
    return
  }

  const actions = computeScrollIntoView(node, {
    boundary: menuNode,
    block: 'nearest',
    scrollMode: 'if-needed',
  })
  actions.forEach(({el, top, left}) => {
    el.scrollTop = top
    el.scrollLeft = left
  })
}