スクロールバーCSS

カスタムスクロールバーのCSSを生成。幅・色・角丸を設定。

プレビュー

スクロールバーのプレビューテキスト 1

スクロールバーのプレビューテキスト 2

スクロールバーのプレビューテキスト 3

スクロールバーのプレビューテキスト 4

スクロールバーのプレビューテキスト 5

スクロールバーのプレビューテキスト 6

スクロールバーのプレビューテキスト 7

スクロールバーのプレビューテキスト 8

スクロールバーのプレビューテキスト 9

スクロールバーのプレビューテキスト 10

スクロールバーのプレビューテキスト 11

スクロールバーのプレビューテキスト 12

スクロールバーのプレビューテキスト 13

スクロールバーのプレビューテキスト 14

スクロールバーのプレビューテキスト 15

スクロールバーのプレビューテキスト 16

スクロールバーのプレビューテキスト 17

スクロールバーのプレビューテキスト 18

スクロールバーのプレビューテキスト 19

スクロールバーのプレビューテキスト 20

スクロールバーのプレビューテキスト 21

スクロールバーのプレビューテキスト 22

スクロールバーのプレビューテキスト 23

スクロールバーのプレビューテキスト 24

スクロールバーのプレビューテキスト 25

スクロールバーのプレビューテキスト 26

スクロールバーのプレビューテキスト 27

スクロールバーのプレビューテキスト 28

スクロールバーのプレビューテキスト 29

スクロールバーのプレビューテキスト 30

幅: 8px

角丸: 4px

トラック色

つまみ色

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #888888cc;
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #888888 #f1f1f1;
}