css scrollbarスタイル設定

css scrollbarスタイル設定

CSSで、ブロック・レベルのコンテナに属性を設定した場合:
注意転載先

overflow:scroll /* x y     */
  
overflow-x:scroll /*  x  */
  
overflow-y:scroll  /*  y  */

ブロックレベルのコンテンツ領域がブロックレベルの要素範囲を超えている場合、スクロールバーとして表示され、中のコンテンツをスクロールすることができます.中のコンテンツはブロックレベルの領域範囲を超えません.スクロールバーの色を変更したり、レールのスタイルを設定したりするなど、最初から表示するスタイルをカスタマイズする必要がある場合があります.この文章はあなたのために用意されています.

にほんたい

scrollbarをCSS疑似要素として設定し、上図の数字に対応します.

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

プロパティの説明:

::-webkit-scrollbar    //       
::-webkit-scrollbar-button   //        
::-webkit-scrollbar-track   //     
::-webkit-scrollbar-track-piece    //    ，       （  ）
::-webkit-scrollbar-thumb //            
::-webkit-scrollbar-corner   //  
::-webkit-resizer   ///           

2.スタイルの設定

/*          
               */
::-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;
}

画像の説明
フレーム、シャドウ、バックグラウンドピクチャなど、任意のオブジェクトを設定できます.作成したスクロールバーは、オペレーティングシステム自体の設定に従ってインタラクティブな動作を完了します.次の擬似クラスは、上の擬似要素に適用できます.

:horizontal//              
:vertical//             
:decrement//          。            ，                     
:increment//          。            ，                     
:start//          。    （      ）         
:end //          。    （      ）         
:double-button//          。                。                  。
:single-button//          。                。                 。
:no-button//             。
:corner-present//            。
:window-inactive//        ，          ，          。
    ：

::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}

3.IEブラウザ

互換IEの参照リンク画像説明
図文

三後記

Chromeはカスタムスクロールバーをよくサポートし、他のブラウザはカスタムスクロールバースタイルをある程度サポートします.リファレンス