CSSで垂直方向のスクロールバーのみを表示する方法

方法1: ::-webkit-scrollbarプロパティを使用する方法 この方法では、WebKitエンジンを使用するブラウザに対してスタイルを適用します。

/* スクロールバーのトラック部分 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
/* スクロールバーのスクロールされた部分 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}
/* 垂直方向のスクロールバーの高さ */
::-webkit-scrollbar {
  width: 8px;
}

方法2: overflow-yプロパティを使用する方法 この方法では、overflow-yプロパティを使用して要素の垂直方向のオーバーフローを制御します。

/* スクロールバーを表示する要素 */
.scrollable-element {
  height: 200px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

方法3: JavaScriptを使用する方法 この方法では、JavaScriptを使用して要素にスクロールバーを追加します。

<!-- スクロールバーを表示する要素 -->
<div class="scrollable-element" id="my-element">
  <!-- コンテンツ -->
</div>
<script>
  const element = document.getElementById("my-element");
  element.style.overflowY = "scroll";
</script>

これらの方法を使用することで、垂直方向のスクロールバーのみを表示することができます。適切な方法を選択し、必要に応じてスタイルをカスタマイズしてください。