オーバーフロー属性は、コンテンツのオーバーフローを制御したり、対応する領域の余分な部分を非表示にしたり、スクロール バーを追加したりできます。
オーバーフローのプロパティ:
| 見える | デフォルト。コンテンツはクリップされず、要素のボックスの外側にレンダリングされます。 |
| 隠れた | コンテンツがトリミングされ、残りのコンテンツは表示されません。 |
| スクロール | コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。 |
| 自動 | コンテンツがトリミングされている場合、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。 |
| あなたは継承します | オーバーフロー属性の値を親要素から継承することを指定します。 |
X 軸の適応設定: overflow-x:auto;
Y 軸の非表示設定: overflow-y:hidden;
ページの HTML:
<div class="box"></div>
ページ CSS スタイル: (幅と高さを設定する必要があります。設定しないと有効にならず、オーバーフローは発生しません)
.box{ 幅: 500px; 高さ: 500ピクセル; オーバーフロー: スクロール;
ボーダー: 1px ソリッドピンク;
}
スクロール バーが垂直に表示されている場合、スクロール バー スタイルを非表示にします。
// スクロールバーの小さな四角形
.box::-webkit-scrollbar-thumb { 境界半径: 3px; 背景色:グレー; }
//スクロールバーの全体的なスタイル.box::-webkit-scrollbar
{ width: 5px; height: 5px; // 高さと幅は、水平スクロールバーと垂直スクロールバーのサイズに対応します} //スクロールバー の中央部分スクロールバー.ボックス::-webkit-scrollbar-track { background-color:pink; }
必要に応じて、上のスクロール バーのスタイルを変更できます。