overflow-x scroll 効かない

overflow-x: scroll; スクロールバーが表示されない時の対処法

この記事では、"overflow-x: scroll;" を設定しても横方向のスクロールができない場合の一般的な原因を分析し、それぞれの解決策を提示します。

1. 要素の幅が親要素の幅を超えていない

コンテンツの幅が親要素の幅以下である場合、"overflow-x: scroll;" を設定しても横方向のスクロールバーは表示されません。


<div class="parent">
  <div class="child">
    長いコンテンツが入っています。長いコンテンツが入っています。長いコンテンツが入っています。
  </div>
</div>


.parent {
  width: 200px;
  overflow-x: scroll;
}

.child {
  min-width: 300px; /* 親要素より大きい幅を設定 */
}

"display: flex;" が設定された要素は、デフォルトで子要素の幅をコンテンツの幅に合わせます。そのため、コンテンツが親要素の幅を超えても、スクロールバーは表示されません。


<div class="parent" style="display: flex;">
  <div class="child">
    長いコンテンツが入っています。長いコンテンツが入っています。長いコンテンツが入っています。
  </div>
</div>


.parent {
  display: flex;
}

.child {
  flex-shrink: 0; /* 子要素の縮小を禁止 */
  overflow-x: scroll;
}

一部のブラウザでは、"overflow-x: scroll;" のサポート状況が異なる場合があります。


.parent {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch; /* iOSのスクロール問題対策 */
}

この記事では、"overflow-x: scroll;" が効かない場合の一般的な原因と解決策を紹介しました。これらの情報を参考に、横スクロールバーの問題を解決してください。