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

常に垂直スクロール バーを表示する

特定の Web デザインでは、ユーザーが div 要素内のスクロール可能なコンテンツを簡単に識別できるようにすることが重要です。 overflow-y:scroll を設定しても、macOS などの特定のオペレーティング システムでアクティブに使用されていない場合、垂直スクロール バーが表示されないことがあります。

解決策:

垂直スクロール バーを強制的に常に表示するには、次の 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);
}

これらのスタイルは、WebKit ベースのmacOS 上の Safari や Chrome などのブラウザ。スクロールバーの外観をカスタマイズすると、アクティブに使用していないときでも、スクロールバーをより目立つようにして、スクロール可能なコンテンツの存在を示すことができます。

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