CSSでスクロールバーを追加する方法

CSS では、overflow 属性を使用してスクロール バーを設定できます。要素に「overflow:scroll」スタイルを追加するだけです。このプロパティは、要素のコンテンツ領域をオーバーフローするコンテンツがどのように処理されるかを定義します。値がスクロールの場合、ユーザー エージェントは、必要かどうかに関係なく、スクロール メカニズムを提供します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

1. overflow 属性を使用して、スクロール バーが表示されるかどうかを設定できます。

この属性は、要素のコンテンツ領域をオーバーフローするコンテンツがどのように処理されるかを定義します。値がスクロールの場合、ユーザー エージェントは、必要かどうかに関係なく、スクロール メカニズムを提供します。したがって、すべてが要素ボックス内に収まる場合でも、スクロールバーが表示される可能性があります。

overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll  /*只是y方向*/

overflow-y: オブジェクトのコンテンツが指定された高さを超えた場合のコンテンツの管理方法を設定します;

overflow-x: オブジェクトのコンテンツが指定された高さを超えた場合のコンテンツの管理方法を設定します指定された幅

パラメータ:

visible: すべてのコンテンツを表示するために領域を拡張します

auto: コンテンツが制限値を超えた場合にのみスクロール バーを追加します

hidden: 常にスクロールバーを非表示にします

Scroll: 常にスクロールバーを表示します

ブロックレベルのコンテンツ領域がブロックレベル要素の範囲を超える場合、次の形式で表示されます。スクロール バー。内部のコンテンツをスクロールできます。コンテンツはブロック レベルの領域の範囲を超えることはありません。

2. スクロール バーのスタイルを設定するには、スクロールバー属性を使用します。

• ::-webkit-scrollbar スクロール バーの全体部分

• : :-webkit-scrollbar-button スクロール バーの両端のボタン

##::-webkit-scrollbar-track 外側のトラック
::- webkit-scrollbar-track-piece 内側のトラック、スクロール バーの中央部分 (削除)
::-webkit-scrollbar-サム スクロール バー内にドラッグできるもの
::-webkit-scrollbar-corner Corner
::-webkit-resizer右下隅のドラッグ ブロックのスタイルを定義します。
例:

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width:16px;
    height:16px;
    background-color:#F5F5F5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
    background-color:#F5F5F5;
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color:#555;
}

推奨学習:

css ビデオ チュートリアル

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