2025/03/31
Safariでwindow.scrollToが効かないとき
setTimeoutを使用しよう
スマートフォン用のサイトを作成し、実機で確認していたところSafariのみwindow.scrollYが動作していないことが分かりました。
const scrollToSelect = (id: string) => {
const element = document.getElementById(id);
if (!element) return;
const to = element.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: to,
behavior: 'smooth'
});
}色々調査しているとsetTimeoutを使用してる記事があり、実装してみたらうまく動きました。
const scrollToSelect = (id: string) => {
const element = document.getElementById(id);
if (!element) return;
const to = element.getBoundingClientRect().top + window.scrollY;
setTimeout(() => {
window.scrollTo({
top: to,
behavior: 'smooth'
});
}, 100);
}ブラウザごとの対応はめんどくさいですね！