目次

WebKit のカスタム スクロールバー

pre::-webkit-scrollbar {
  width: 12px;
}
 
pre::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(50, 50, 50, .9);
}
 
pre::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, .3);
  border-radius: 5px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

Test

pre::-webkit-scrollbar {
  width: 12px;
}
 
pre::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(50, 50, 50, .9);
}
 
pre::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, .3);
  border-radius: 5px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

参考文献

Custom Scrollbars in WebKit | CSS-Tricks

付録

なんかWebKitのカスタム スクロールバーのCSSっていまいちな感じですよねぇ😅💦 / Twitter
そう入れ歯、カスタムスクロールバーが上下の両端に埋まる原因が判明しましたけど...🤔とてもくだらない原因でしたねぇ😅💦💦💦 / Twitter