CSSでスクロールバーの色を変えたり、可視・不可視を変更することが出来ます。デザインの幅が広がりますがアクセシビリティを損なわないように注意しましょう。

html{
 scrollbar-color: #fff #e587cb; /* つまみの色　背景色 */
 scrollbar-width: auto;
}

scrollbar-colorプロパティでスクロールバーのつまみの色と背景色を指定します。scrollbar-widthで幅を指定できます。こちらは以下の値を指定します。

• auto：デフォルト幅
• thin：スクロールバーを細くする
• none：スクロールバーを非表示

Safari（Webkit）で指定する場合

古いSafariではまだ未対応なので独自実装のCSSセレクタで指定します。こちらのほうが細かくデザインを指定できます。

html::-webkit-scrollbar {
 width: 15px; /* スクロールバーの横幅 */
}
html::-webkit-scrollbar-track-piece {
 background-color: #e587cb; /* Safari スクロールバーの背景色 */
}
html::-webkit-scrollbar-thumb {
 background-color: #fff; /* Safari スクロールバーのつまみの色 */
 border: 3px solid #e587cb; /* Safari スクロールバーのつまみの枠色 */
 border-radius: 10px;
 background-clip: content-box;
}

スクロールバーを非表示にする場合はdisplay: none;を指定します。

html::-webkit-scrollbar {
 display: none;
}

おまけ

かつて覇権を握っていた憎きIE（Internet Explorer）でも、CSS独自実装でスクロールバーの色を変えたり出来ました。一部のバージョンのWindows Operaでも再現します。

IE5とかでサポートされており、他のサイトとデザインの差別化が出来たとか出来ないとか。

おしまい♥