CSSでdivスクロールバーを設定する方法

Web ページやモバイル アプリケーションの開発に伴い、スクロール バーは不可欠なユーザー エクスペリエンスになっており、CSS3 が提供する一連のスクロール バー スタイル設定を使用すると、スクロール バー スタイルをより柔軟にカスタマイズできます。 CSS を使用して div スクロール バーを設定します。

1. 基本設定

コンテンツを含む div を HTML で定義します。コンテンツが div のサイズを超える場合は、スクロール バーを使用して表示する必要があります。以下は基本的な HTML 構造です:

<div class="wrapper">
  <div class="content">
    <p>这里是一些内容</p>
    <p>这里也是一些内容</p>
    <p>这里还是一些内容</p>
  </div>
</div>

次に、div の基本スタイルを設定しましょう。次のスタイルを追加できます:

.wrapper {
    width: 300px;
    height: 200px;
    overflow: auto; /* 滚动条设置 */
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

.content {
    width: 100%;
    height: auto;
}

overflow: auto 属性を .wrapper に設定します。スクロール バーが非表示の場合、コンテンツ サイズが div サイズを超えると、外側に拡張して他の要素を覆うことなくスクロール バーが表示されます。

2. スクロール バーの基本設定

次に、次の方法でスクロール バーのスタイルをさらにカスタマイズできます:

/* 滚动条整体样式 */
.wrapper::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #f5f5f5;
}

/* 滚动条thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb {
    width: 5px;
    height: 10px;
    background-color: #9a9a9a;
}

/* 滚动条hover状态下thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* 滚动条上下箭头样式 */
.wrapper::-webkit-scrollbar-button {
    background-color: #ccc;
    display: none;
}

/* 滚动条左右箭头样式 */
.wrapper::-webkit-scrollbar-button:start:decrement, .wrapper::-webkit-scrollbar-add-button {
    display: none;
}

.wrapper::-webkit-scrollbar-button:end:increment, .wrapper::-webkit-scrollbar-sub-button {
    display: none;
}

コード分析:

1. ::-webkit-scrollbar : すべてのスクロール バー ウィジェットを選択します。このスタイルでは、スクロール バー全体の幅、高さ、背景色を設定できます。
2. ::-webkit-scrollbar-thumb : スライダーを選択します。このスタイルでは、スライダーの幅、高さ、背景色を制御できます。
3. ::-webkit-scrollbar-thumb:hover: ホバー状態のスライダーのスタイルを選択します。
4. ::-webkit-scrollbar-button: スクロールバーの両端の矢印部分を選択します。このスタイルは、背景色と、上下左右の矢印を表示するかどうかを制御するために使用されます。
5. ::-webkit-scrollbar-button:start:decrement または ::-webkit-scrollbar-sub-button: スクロール バーの矢印を選択します (スクロールアップ)/左矢印(左スクロール)部分。スクロールバーが垂直/水平の場合に使用します。
6. ::-webkit-scrollbar-button:end:increment または ::-webkit-scrollbar-add-button: スクロール バーの下矢印 (下スクロール)/右矢印(右スクロール)部分。スクロールバーが垂直/水平の場合に使用します。

3. カスタマイズされたスクロール バー

ニーズに応じてスクロール バーのスタイルをカスタマイズできます。以下はカスタム スタイルの例です:

.wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #a0a0a0;
}

.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.wrapper::-webkit-scrollbar-corner {
    background-color: #f5f5f5;
}

コード分析:

1. ::-webkit-scrollbar-track: スクロール バーのトラック部分 (スライダーとスクロール矢印/スクロールの間の領域) を選択します。背景色、境界線、角の丸いなどのトラック スタイルを設定できます。この例では、角の丸い設定を行います。
2. ::-webkit-scrollbar-thumb: スライダーのスタイルを選択します。この例では、丸い角を設定し、スライダーの背景色とホバー状態を設定します。背景色を低くします。
3. ::-webkit-scrollbar-corner: スクロール バーの隅の色を設定します。通常はコンテナと同じ色に設定します。

4. 概要

上記のスクロール バーを設定した後、実際のニーズに応じて設定する対応するスタイルを選択できるため、Web ページやモバイル アプリケーションをより快適に体験できます。インタラクティブな体験。同時に、上記の例は主に Chrome や Safari などの一部の Webkit ベースのブラウザに適用できることに注意してください。他のブラウザに適応させたい場合は、別のスタイルと属性を使用する必要があります。

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