Function scrollToAwaitable

src/Utils/scrollToAwaitable.ts:23–100

({
  target,
  container = window,
  offset = 0,
  behavior = "smooth",
  timeout = 15_000,
  onComplete,
}: ScrollToWithCallbackOptions)

 * @returns a Promise and a disposer you can call to cancel early.
 */
export const scrollToAwaitable = ({
  target,
  container = window,
  offset = 0,
  behavior = "smooth",
  timeout = 15_000,
  onComplete,
}: ScrollToWithCallbackOptions): {
  promise: Promise<void>
  cancel: () => void
} => {
  const isWindow = container === window
  const el = isWindow
    ? document.scrollingElement || document.documentElement
    : (container as HTMLElement)

  // Calculate destination relative to the scrolling context
  const baseDestination =
    typeof target === "number"
      ? target
      : (() => {
          const rect = target.getBoundingClientRect()

          if (isWindow) {
            // When scrolling the viewport, translate rect.top (viewport-relative) into document space
            return rect.top + window.scrollY
          }

          // For an arbitrary scrolling container, translate rect.top into the container's scroll space
          const containerRect = el.getBoundingClientRect()
          return rect.top - containerRect.top + el.scrollTop
        })()

  const destination = baseDestination + offset

  ;(isWindow ? window : el).scrollTo({ top: destination, behavior })

  let frameId = 0
  let resolved = false
  const within = () =>
    Math.abs((isWindow ? window.scrollY : el.scrollTop) - destination) <= 1

  const finish = () => {
    if (resolved) return
    resolved = true
    cancelAnimationFrame(frameId)
    clearTimeout(timerId)
    onComplete?.()
    resolvePromise()
  }

  const step = () => {
    if (within()) finish()
    else frameId = requestAnimationFrame(step)
  }

  frameId = requestAnimationFrame(step)