CSS で垂直スクロールバーを常に表示するようにするにはどうすればよいですか?

CSS で垂直スクロール バーを常に表示する方法

特定のシナリオでは、垂直スクロール バーが常に表示されるようにしたい場合があります。 div のコンテンツが表示領域を超えていない場合でも。デフォルトでは、マウスが要素の上に置かれるまで、ブラウザはスクロールバーを非表示にします。

スクロールバーを常に表示するようにするには、次の CSS を追加します。

:::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

最初の行は、デフォルトのブラウザ スタイルを削除します。 2 行目は、スクロールバーのサムのカスタム スタイルを定義します。

例:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
  
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }
}

以上がCSS で垂直スクロールバーを常に表示するようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。