====== WebKit のカスタム スクロールバー ======
<WRAP mincode_long>
<php>
$less = new lessc;
echo "<style>".$less->compile(<<< LESS
.wrap_mincode_long, .wrap_ncolor_result_long {
  pre {
    height: 100px;
  }
  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);
  }
}
LESS)."</style>";
</php>
<code css>
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);
}
</code>
</WRAP>

===== Test =====
<WRAP ncolor_result_long><code css>
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);
}
</code></WRAP>

===== 参考文献 =====
[[https://css-tricks.com/custom-scrollbars-in-webkit/|Custom Scrollbars in WebKit | CSS-Tricks]]\\

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