Есть ли обратный вызов для window.scrollTo? - программирование
Подтвердить что ты не робот

Есть ли обратный вызов для window.scrollTo?

Я хочу вызвать focus() на вкладке после прокрутки вдовы. Я использую гладкое поведение для scrollTo(). Проблема заключается в focus метод focus сокращает плавное поведение. Решение состоит в том, чтобы вызвать функцию focus сразу после конца прокрутки.

Но я не могу найти ни одного документа или нити о том, как определить конец метода scrollTo.

let el = document.getElementById('input')
let elScrollOffset = el.getBoundingClientRect().top
let scrollOffset = window.pageYOffset || document.documentElement.scrollTop
let padding = 12
window.scrollTo({
  top: elScrollOffset + scrollOffset - padding,
  behavior: 'smooth'
})
// wait for the end of scrolling and then
el.focus()

Есть идеи?

4b9b3361

Ответ 1

Я нашел способ добиться того, чего хочу, но я думаю, что это немного хаки, не так ли?

let el = document.getElementById('input')
let elScrollOffset = el.getBoundingClientRect().top
let scrollOffset = window.pageYOffset || document.documentElement.scrollTop
let padding = 12
let target = elScrollOffset + scrollOffset - padding
window.scrollTo({
  top: target,
  behavior: 'smooth'
})
window.onscroll = e => {
  let currentScrollOffset = window.pageYOffset || document.documentElement.scrollTop
  // Scroll reach the target
  if (currentScrollOffset === target) {
    el.focus()
    window.onscroll = null // remove listener
  }
}

Ответ 2

Я написал обобщенную функцию, основанную на решении Джорджа Абитбола, без перезаписи window.onscroll:

/**
 * Native scrollTo with callback
 * @param offset - offset to scroll to
 * @param callback - callback function
 */
function scrollTo(offset, callback) {
    const onScroll = function () {
        const scrollTop = window.scrollTop || window.pageYOffset

        if (scrollTop === offset) {
            window.removeEventListener('scroll', onScroll)
            callback()
        }
    }
    window.addEventListener('scroll', onScroll)
    onScroll()
    window.scrollTo({
        top: offset,
        behavior: 'smooth'
    })
}