【JavaScript】ボタンを押したら横スクロールして要素を表示させる

というわけで今回は、ボタンを押したらそれに適応した要素を横スクロールさせて表示させる実装をご紹介したいと思います。ちょっと言葉では表現しづらいので実際に見ていきましょう！

ボタンを押したら横スクロールして要素を表示させる

さっそく完成品をみていきましょう！

See the Pen 横スクロールボタン by そす (@Sosgoyo) on CodePen.

ボタンは月～金があり、それぞれのボタンを押すとそれに対応した曜日が
横スクロールで表示される、という構造です。

横スクロールの作成方法は以前ご紹介しましたのでそちらをご参照ください。

【CSS】overflow-xを使ってはみ出た部分をスクロールさせる

ではコードを説明していきます！

コード説明

【HTML】

<div class="container">
  <div class="btns">
    <button onclick="scrollToElement('monday')" class="btn">月</button>
    <button onclick="scrollToElement('tuesday')" class="btn">火</button>
    <button onclick="scrollToElement('wednesday')" class="btn">水</button>
    <button onclick="scrollToElement('thursday')" class="btn">木</button>
    <button onclick="scrollToElement('friday')" class="btn">金</button>
  </div>
  <div class="wrapper">
    <div class="schedule">
      <div class="week" id="monday">月曜日</div>
      <div class="week" id="tuesday">火曜日</div>
      <div class="week" id="wednesday">水曜日</div>
      <div class="week"  id="thursday">木曜日</div>
      <div class="week"  id="friday">金曜日</div>
    </div>
  </div>
</div>

【JavaScript】

const scheduleButtons = document.querySelectorAll('.btn');
　scheduleButtons.forEach(scheduleButton => {
　　scheduleButton.addEventListener("click", function () {
	// すべてのボタンから is-active を削除
	scheduleButtons.forEach(btn => btn.classList.remove("is-active"));
　　　　　// クリックされたボタンに is-active を追加
	　this.classList.add("is-active");
　　　});
　});	

function scrollToElement(id) {
　const container = document.querySelector(".wrapper");
　const target = document.getElementById(id);
　　if (target) {
　　　container.scrollTo({
　　　　left: target.offsetLeft - container.offsetLeft,
	behavior: "smooth"
　　　});
　　}
}

// 関数をグローバルスコープに登録
window.scrollToElement = scrollToElement;

ボタン側の設定で特別なことはonclick="scrollToElement('monday')"です。
これは、ボタンがクリックされたときにscrollToElementという関数を呼び出します。
引数には各要素に設定したidを渡しております。

続いてJavaScriptの説明です。

前半の部分は、クリックされているボタンの色を変えたかったので
クリックしたボタンに「.is-active」を付ける実装をしてます。

後半部分が横スクロールの実装となります。抜粋↓

function scrollToElement(id) {
　const container = document.querySelector(".wrapper");
　const target = document.getElementById(id);
　　if (target) {
　　　container.scrollTo({
　　　　left: target.offsetLeft - container.offsetLeft,
	behavior: "smooth"
　　　});
　　}
}

// 関数をグローバルスコープに登録
window.scrollToElement = scrollToElement;

全体の動作イメージ：
・.wrapper クラスを持つ要素（横スクロール可能なコンテナ）がある。
・その中に、id="monday" のような子要素がある。
・scrollToElement('monday') を呼び出すと、
　.wrapper がその monday 要素の位置まで 横にスムーズにスクロール する。

function scrollToElement(id) {

関数 scrollToElement を定義。id にはスクロールしたい要素のIDが渡されます。

const container = document.querySelector(".wrapper");
　const target = document.getElementById(id);

.wrapper クラスの要素（＝スクロール可能な親要素）を取得。
指定されたID（例: "monday"）を持つ要素を取得。

if (target) {
　　　container.scrollTo({
　　　　left: target.offsetLeft - container.offsetLeft,
	behavior: "smooth"
　　　});
　　}

まずifを使って、上記で指定した変数targetが存在するか確認します。

scrollTo：指定の位置にスクロールする。

left: target.offsetLeft - container.offsetLeft：

• target.offsetLeft：ページ全体の中での左端からの距離。
• container.offsetLeft：コンテナ自身の左端の位置。
• 両者の差をとることで、「コンテナ内でのターゲット要素の相対位置」を求める。

behavior: "smooth"：スクロールをなめらかにする。

// 関数をグローバルスコープに登録
window.scrollToElement = scrollToElement;

この行によって、関数 scrollToElement を グローバルスコープ（window）に登録。
→ HTMLの onclick="scrollToElement('monday')" のような呼び出しが可能になる。

まとめ

というわけで今回はボタンを押したらそれに適応した要素を横スクロールさせて表示させる実装をご紹介しました！
是非ご活用くださいませ！