CSS div要素で水平スクロールバーのみを表示する方法：overflow-xプロパティを使う

2024-04-08

CSS div要素で水平スクロールバーのみを表示する方法

このチュートリアルでは、CSSを使用してdiv要素に水平スクロールバーのみを表示する方法をいくつか紹介します。

方法

overflow-x プロパティを使用する

これは、水平方向のスクロールバーのみを表示する最も簡単な方法です。

.div-element {
  overflow-x: scroll;
}

overflow プロパティを使用して、水平方向と垂直方向のスクロールバーを個別に制御できます。

.div-element {
  overflow-x: scroll;
  overflow-y: hidden;
}

::-webkit-scrollbar 疑似クラスを使用する

この方法は、スクロールバーのスタイルをカスタマイズしたい場合に便利です。

.div-element::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #ccc;
}

.div-element::-webkit-scrollbar-thumb {
  background-color: #000;
}

flexbox レイアウトを使用して、水平方向にスクロール可能なコンテナを作成できます。

.div-element {
  display: flex;
  overflow-x: scroll;
}

補足

上記の例では、div-element クラスを要素に適用する必要があります。
スクロールバーが必要ない場合は、overflow プロパティを hidden に設定できます。
スクロールバーのスタイルは、ブラウザによって異なる場合があります。

上記の方法は、基本的なものです。より複雑なレイアウトの場合は、さらに高度な CSS テクニックが必要になる場合があります。

スクロールバーの表示は、ユーザーエクスペリエンスに影響を与える可能性があります。必要に応じてのみ表示するようにしましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS div element - how to show horizontal scroll bars only ?</title>
  <style>
    .div-element {
      width: 500px;
      height: 200px;
      border: 1px solid #ccc;
      overflow-x: scroll;
    }
  </style>
</head>
<body>
  <div class="div-element">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium lectus. Nunc ullamcorper, ipsum eget tincidunt ultricies, eros leo tincidunt tellus, eget ultricies diam nibh eu neque. Nam ullamcorper, eros eget hendrerit ultricies, eros leo tincidunt tellus, eget ultricies diam nibh eu neque. Nam ullamcorper, eros eget hendrerit ultricies, eros leo tincidunt tellus, eget ultricies diam nibh eu neque.</p>
  </div>
</body>
</html>

説明

div-element クラスは、width、height、border、overflow-x プロパティを定義します。
width プロパティは、要素の幅を500ピクセルに設定します。
border プロパティは、要素に1ピクセルの境界線を設定します。
overflow-x プロパティは、要素に水平スクロールバーを表示します。

実行

このコードをHTMLファイルに保存して、ブラウザで開きます。要素内に水平スクロールバーが表示されていることを確認できます。

上記のコード以外にも、水平スクロールバーのみを表示するにはいくつかの方法があります。

.div-element {
  overflow: scroll;
  overflow-y: hidden;
}

.div-element::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #ccc;
}

.div-element::-webkit-scrollbar-thumb {
  background-color: #000;
}

flexbox レイアウトを使用する:

.div-element {
  display: flex;
  overflow-x: scroll;
}

水平スクロールバーのみを表示する他の方法

white-space プロパティを使用して、要素内のテキストの折り返しを制御できます。

.div-element {
  white-space: nowrap;
  overflow-x: scroll;
}

この方法を使用すると、要素内のテキストが折り返されず、水平スクロールバーが表示されます。

position プロパティと left プロパティを使用して、要素を水平方向にスクロールできます。

.div-element {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: scroll;
}

JavaScriptを使用して、水平スクロールバーを動的に表示できます。

const divElement = document.querySelector('.div-element');

divElement.addEventListener('scroll', () => {
  if (divElement.scrollLeft > 0) {
    // 水平スクロールバーが表示されたら処理を行う
  }
});

この方法を使用すると、スクロールバーの状態に応じて処理を行うことができます。