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
}
}
}