useScrollTo

<template>
  <div class="flex w-full flex-col items-center gap-4">
    <div
      ref="parent"
      class="bg-surface-base aspect-16/9 w-full snap-both snap-mandatory overflow-scroll"
    >
      <div
        class="type-surface-body-sm text-surface-muted relative h-[900px] w-[900px]"
      >
        <div class="bg-surface-high absolute top-0 left-0 px-2 py-1">
          Top Left
        </div>
        <div
          ref="el"
          class="bg-surface-high absolute right-0 bottom-0 px-2 py-1"
        >
          Bottom Right
        </div>
      </div>
    </div>
    <m-button @click="scroll()">Scroll</m-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue'
import { MButton } from 'mirror-compat'
import { useScrollTo } from '@maas/vue-equipment/composables/useScrollTo'
import { easeInQuad } from '@maas/vue-equipment/utils'

const { scrollToTarget } = useScrollTo()

const elRef = useTemplateRef('el')
const parentRef = useTemplateRef('parent')

const scroll = () => {
  scrollToTarget({
    target: elRef,
    parent: parentRef,
    speed: 200,
    easing: easeInQuad,
  })
}
</script>