как сделать прокрутку до определенного элемента, когда пользователь начинает скроллить

нужно сделать так чтобы, когда пользователь начинал скроллить, страница сама доскролила до следующего блока. скролл должен на всех браузерах работать одинаково, использовал behavior: 'smooth', но в сафари он слишком резкий. пишу на vue3 с typescript. перепробовал уже кучу ваирантов, может ктото уже реализовывал

let positionScroll: number
let counter: number = 0
const oY = ref(0)
const isScroll = ref(true)

onMounted(() => {
  const banner: HTMLElement | null = document.querySelector('#banner')
  const _top: Element | null = document.querySelector('#_top')
  const _bottom: Element | null = document.querySelector('#_bottom')
  const sizeH = (banner as Element).getBoundingClientRect().height

  document.addEventListener(
    'wheel',
    function (e: WheelEvent) {
      positionScroll = e.deltaY
      oY.value = (banner as Element).getBoundingClientRect().top

      if (
        (positionScroll >= 1 && -oY.value <= sizeH) ||
        (positionScroll >= 100 && -oY.value <= sizeH)
      )
        if (!(_bottom as any).click()) (_bottom as any).click()
      if (
        (positionScroll <= -1 && -oY.value <= sizeH) ||
        (positionScroll <= -100 && -oY.value <= sizeH)
      )
        if (!(_top as any).click()) (_top as any).click()
    },
    { passive: true }
  )

  document.addEventListener('click', function (e: any) {
    if (e.target.classList.contains('_bottom') && isScroll.value) {
      scrolling(sizeH)
    }
    if (e.target.classList.contains('_top') && isScroll.value) {
      scrolling()
    }
  })
})

function scrolling(size: number = 0) {
  counter++
  if (counter == 1) {
    isScroll.value = false
    window.scroll({ top: size, left: 0, behavior: 'smooth' })
  }

  setTimeout(() => {
    counter = 0
    isScroll.value = true
  }, 500)
}