Есть ли обратный вызов для 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()
Есть идеи?
Ответы
Ответ 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'
})
}