1. スクロールバーの表示・非表示

スクロールバーの表示・非表示の設定には、overflow プロパティを使用します。

.xxx {
  overflow: visible; /* 内容が収まらない場合、はみ出して表示 (初期値) */
  overflow: hidden; /* 内容が収まらない場合、非表示 */
  overflow: auto; /* 内容が収まらない場合、スクロールバーを表示 */
  overflow: scroll; /* 常に縦横スクロールバーを表示 */
}

常に縦か横のスクロールバーを表示させたい場合

縦か横どちらか片方のスクロールバーを常に表示させたいときは下記のように設定します。

.xxx {
  overflow: hidden;
  overflow-x: scroll;
  /* overflow-xが横スクロール、overflow-yが縦スクロール */
}

スクロールはさせたいけどスクロールバーは非表示にしたい場合

overflow: hidden;はスクロールバーを非表示にしてスクロールもできないようにします。スクロールバーは非表示にしたいけどスクロールの機能は残したい場合は下記のように設定します。

.xxx {
  -ms-overflow-style: none; /* IE */
  scrollbar-width: none; /* Firefox */
}
.xxx::-webkit-scrollbar {
  display: none;
}

2. スクロールバーのデザイン変更に使う CSS

スクロールバーのデザインを変更したいときには-webkit-scrollbarプロパティを使用します。この設定は Firefox と IE には現在適用できません。

::-webkit-scrollbar {
} /* スクロールバー全体の幅などを指定 */
::-webkit-scrollbar-track {
} /* スクロールバーの軌道 */
::-webkit-scrollbar-thumb {
} /* スクロールバーの動く部分 */
::-webkit-scrollbar-corner {
} /* スクロールバーが交差する角の部分（縦と横のスクロールバーが表示されるときのみ必要） */

Can I use… | scrollbar

3. Windows のスクロールバーを Mac 風にしたいときの CSS

（左：本物 / 右：Mac 風）

::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

::-webkit-scrollbar-track {
  background: rgba(250, 250, 250, 1);
  border: solid 1px rgba(245, 245, 245, 1);
}

::-webkit-scrollbar-thumb {
  background: rgba(190, 190, 190, 1);
  border-radius: 10px;
  box-sizing: border-box;
  border: solid 3px rgba(250, 250, 250, 1);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(125, 125, 125, 1);
}

::-webkit-scrollbar-corner {
  background: rgba(250, 250, 250, 1);
}

4. デモ

デモの補足説明、左から...

• デフォルト
• Mac 風スクロールバー
• width,height - 5px
• width,height - 10px
• width,height - 15px
• スクロールバー非表示、スクロールは可能