ホームページ制作関連
2026/2/12
二つの要素の横スクロールをシンクロさせる
こんにちは、茨城県水戸市で日々ホームページつくっているレターズです。
今回はタイトルにありますように二つの要素の横スクロールをシンクロさせるjavascriptの書き方をご紹介します。
前提として、クラス名scroll_tbとscroll_placesが横スクロールできる状態になっています。
const scrollTb = document.querySelector('.scroll_tb');
const scrollPlaces = document.querySelector('.scroll_places');
let isSyncing = false;
function syncScroll(source, target) {if (isSyncing) return;
isSyncing = true;
target.scrollLeft = source.scrollLeft;
requestAnimationFrame(() => {
isSyncing = false;
});
}
scrollTb.addEventListener('scroll', () => {
syncScroll(scrollTb, scrollPlaces);
});
scrollPlaces.addEventListener('scroll', () => {
syncScroll(scrollPlaces, scrollTb);
});
とこのような感じです。これ使う頻度は低いかもしれないですが、いざという時できるっていうことを知っているのは大きな武器だと思います。
Contact
お問い合わせ
お問い合わせ、お見積もりはこちらのフォームよりご連絡ください。
通常2日以内に返信させていただいておりますが、稼働状況によりお時間をいただくこともございます。