0

Vue CLI 3 , Vue 2.5.17

I want to scroll to Specific div element when RestApi response is success. But my code isn't working to IOS devices.

I try to "scroll", "scrollTo" and "scrollTop" functions. But those functions aren't working.

 const el = document.querySelector(selector)

 // Custom Scroll Class Method
 Scroll.scrollIt(el, 200, 'linear')

 // Common ScrollTo Method
 document.querySelector('html', 'body')
   .scrollTo({
     top: (el.offsetTop - 90),
     left: 0,
     behavior: 'smooth'
   })

ScrollIt function is a custom Scroll class method.

export default class Scroll {
  public static scrollIt (element: HTMLElement, duration: number, callback?: Function) {
    const start = document.querySelector('document, html, body').scrollTop
    const change = element.offsetTop - start
    let currentTime = 0
    const increment = 20

    const animateScroll = function () {
      currentTime += increment
      const val = easeInOutQuad(currentTime, start, change, duration)
      document.querySelector('document, html, body').scrollTop = val - 90
      if (currentTime < duration) {
        setTimeout(animateScroll, increment)
      }
    }
    animateScroll()

    // t = current time
    // b = start value
    // c = change in value
    // d = duration
    function easeInOutQuad (t: number, b: number, c: number, d: number) {
      t /= d/2
      if (t < 1) return c/2*t*t + b
      t--
      return -c/2 * (t*(t-2) - 1) + b
    }
  }
}

mathk
  • 7,973
  • 6
  • 45
  • 74

0 Answers0