CSSスクロールバーの幅を設定する方法

CSS でスクロール バーの幅を設定する方法: 1. 「::-webkit-scrollbar」疑似クラス セレクターを使用してスクロール バー全体を選択します; 2. スクロール全体の幅を設定しますbar から width 属性まで。構文形式は「::-webkit-scrollbar{width:width value;}」です。

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

スクロール バーは現在多くのプロジェクトで使用されており、スクロール バーをシミュレートするために使用されることもあります。多くの大きなメールボックスは CSS スタイルを使用して設定されています。では、CSS でスクロール バーの幅を設定するにはどうすればよいですか? ?

CSS では、「::-webkit-scrollbar」疑似クラス セレクターと width 属性を使用して、スクロール バーの幅を設定できます。構文形式は次のとおりです:

::-webkit-scrollbar{
width:宽度值;
}

次の疑似クラス要素セレクターを使用して、さまざまな Webkit ブラウザーのスクロール バー スタイルを変更することもできます:

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

• : :-webkit-scrollbar-thumb スクロール バー内の小さな四角 (つまり、スクロール バー スライダー) は上下に移動できます (または水平スクロール バーは左右に移動できます)

• ::-webkit-scrollbar-track スクロール バーのトラック (上の図のスクロール バーの溝に対応し、スクロール バーのスライダーである Thumb が含まれています)

• ::-webkit-scrollbar -button スクロール バーのトラックの両端にあるボタン。クリックすると小さな正方形の位置を微調整できます

• #::-webkit-scrollbar-corner コーナー、つまり 2 つのスクロール バーの交差点

• ::-webkit-scrollbar-track-piece 内側トラック、中央スクロール バーの一部

• #::-webkit-resizer 2 スクロール バーの交差点にある小さなコントロールで、

/*滚动条样式*/
.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
        width:4px;/*高宽分别对应横竖滚动条的尺寸*/
        height:4px;
}
.cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgba(0,0,0,0.2);
}
.cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgba(0,0,0,0.1);
}

## をドラッグして要素のサイズを変更します。

#例:

1.、スタイル パート

<style>
        /*定义滚动条样式（高宽及背景）*/ 
        ::-webkit-scrollbar { 
            width: 6px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
            background: #007acc;
        } 
        /*定义滚动条轨道（凹槽）样式*/ 
        ::-webkit-scrollbar-track { 
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
            border-radius: 3px; 
        } 
        /*定义滑块 样式*/ 
        ::-webkit-scrollbar-thumb { 
            border-radius: 3px; 
            height: 100px;    /* 滚动条滑块长度 */
            background-color: #ccc; 
        }
    </style>

2. ボディ パート

<div style="height: 200px;overflow-y: scroll;background: #52cc8f;">
        11111111
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
    </div>

レンダリング:

#(学習ビデオ共有: css ビデオ チュートリアル

)

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