CSSでカスタムブラウザーのスクロールバーのスタイルを実装する

2017.07.08 4,341 0

本日、憧憬ブログを訪問したところ、彼のサイトのブラウザーのデフォルトのサイドスクロールバーがカスタムスタイルに変更されていることに気付きました。後でネットで調べてみたところ、このスタイルは CSS でデザインできることが分かりました。そこで自分でも試してみて、ついでに CSS コードを拝借しました。当サイトではすでに導入していますので、効果は実際に確認してみてください。

注意：

このスタイルは Chromium ベースのブラウザーに限られます。たとえば、Google Chrome、QQブラウザー、360ブラウザーなどです。Chromium ベースではないブラウザーではスタイルが表示されません。たとえば、Firefox、Operaなどです。

CSSコード

属性の説明

Plain Text

::-webkit-scrollbar               /* 滚动条整体部分 */::-webkit-scrollbar-button        /* 滚动条两端的按钮 */::-webkit-scrollbar-track         /* 外层轨道 */::-webkit-scrollbar-track-piece   /* 内层轨道滚动条中间部分 */::-webkit-scrollbar-thumb         /* 滚动条里面可以拖动的部分 */::-webkit-scrollbar-corner        /* 边角 */::-webkit-resizer                 /* 定义右下角拖动块的样式 */

サンプルコード

以下は当サイトで使用している CSS スタイルです。必要に応じて自由に変更してください。

CSS

/* 滚动条默认显示样式 */
::-webkit-scrollbar-thumb {
   background-color: #03a9f4;
   height: 50px;
   outline-offset: -2px;
   outline: 2px solid #cddc39;
   -webkit-border-radius: 4px;
   border: 2px solid #fff;
}

/* 鼠标悬停滚动条样式 */
::-webkit-scrollbar-thumb:hover {
   background-color: #00bcd4;
   height: 50px;
   -webkit-border-radius: 4px;
}

/* 滚动条宽度与高度 */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

/* 滚动框背景样式 */
::-webkit-scrollbar-track-piece {
   background-color: #fff;
   -webkit-border-radius: 0;
}

CSSでカスタムブラウザーのスクロールバーのスタイルを実装する

CSSコード

属性の説明

サンプルコード

コメント

コメントを投稿