日々の記事

こんにちは、茨城県水戸市で日々ホームページつくっているレターズです。
今回はタイトルにありますように二つの要素の横スクロールをシンクロさせる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);

});

とこのような感じです。これ使う頻度は低いかもしれないですが、いざという時できるっていうことを知っているのは大きな武器だと思います。