Zenn
Open1

横スクロールが可能な要素で、指定した要素を一番左に寄せたい時のtips

CSS
JavaScript
okita kamegorookita kamegoro

HTMLの要素を左端に寄せるためには、JavaScriptのscrollIntoView()メソッドを使用可能である。以下に具体的な方法を示す。

前提となるHTMLの構造は以下の通り：

<div id="scroll-container">
  <div id="item-1" class="scroll-item">Item 1</div>
  <div id="item-2" class="scroll-item">Item 2</div>
  <div id="item-3" class="scroll-item">Item 3</div>
  <!-- その他のアイテム... -->
</div>

これは、画像や、メニューバーが横並びになっている場合でよく見る実装である。

基本的なCSSの設定は次のように：

#scroll-container {
  display: flex;
  overflow-x: auto;
}

.scroll-item {
  /* 適切な幅とマージンを設定する */
  width: 200px;
  margin-right: 10px;
}

特定の要素を左端に寄せるJavaScript関数は、scrollIntoView()メソッドを使用して以下のように作成する：

function scrollToElement(elementId) {
  const item = document.getElementById(elementId);
  
  if (item) {
    item.scrollIntoView({block: 'nearest', inline: 'start'});
  }
}

scrollIntoView()メソッドにオプションとして{block: 'nearest', inline: 'start'}を設定する。これにより、指定した要素が視覚的なビューポートの左端（または上端）に配置される。

例えば、IDが "item-3" の要素を左端に寄せたい場合は、以下のようにこの関数を呼び出す：

scrollToElement('item-3');