html スクロールバーを設定する-Golang-php.cn

HTML スクロールバーの設定

Web ページにテキストコンテンツが多すぎると、ページが不明瞭になったり、レイアウトが混乱したりすることがあります。現時点では、ユーザーがページ上のすべてのコンテンツを表示できるようにスクロールバーを使用する必要があります。 HTMLでは属性を設定することでスクロールバー機能を実装できます。

その中で、最もよく使用される 2 つの属性は、overflow と overflow-x / overflow-y です。

overflow プロパティ

このプロパティは、コンテンツがコンテナを超えたときにスクロールバーを表示するかどうかを決定します。使用できる値は 3 つあります:

visible: デフォルト値。スクロールバーは表示されませんが、コンテンツがコンテナの一部からはみ出すことを意味します。
hidden: オーバーフローしたコンテンツが表示されず、スクロールバーも表示されないことを示します。
auto: コンテンツがコンテナからオーバーフローした場合にのみスクロールバーが表示され、それ以外の場合は表示されないことを示します。

例:

 这里是一段很长的内容...

ログイン後にコピー

このコードでは、div 要素の幅は 200 ピクセル、高さは 100 ピクセルです。コンテンツがこの範囲を超えると、スクロールバーが自動的に表示されます。

overflow-x および overflow-y 属性

全体的なスクロールバーの設定に加えて、水平スクロールバーと垂直スクロールバーをそれぞれ設定することもできます。オーバーフロー-x とオーバーフロー-y。

次のサンプルコードを示します。

 这里是一些很宽的内容...

ログイン後にコピー

このコードでは、2 つの属性が使用されます。コンテンツの幅が広すぎる場合は、水平スクロールバーのみが表示され、垂直スクロールバーは表示されません。これにより、ページに他のコンテンツを表示するためのより多くのスペースが確保されます。

さらに、一般的に使用される属性として、overflow-style があります。これは、borderWidth、color、style などのスクロールバーのスタイルを設定するために使用できます。たとえば、スクロールバーの色を青に変更し、幅を 10 ピクセルに設定するには、次のコードを使用します。

::-webkit-scrollbar { width: 10px; height: 10px; background-color: #f2f2f2; } ::-webkit-scrollbar-thumb { background-color: #2196F3; }

ログイン後にコピー

要約すると、HTML を使用したスクロールバーの設定は非常に簡単です。 overflow および overflow-x / overflow-y プロパティを設定することで、Web ページのレイアウトとコンテンツ表示を簡単に実装できます。最後に、オーバーフロースタイルを使用することで、スクロールバーとブランド設定およびコーディングスタイルの一貫性を高めることができます。

以上がhtml スクロールバーを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。