html_css:webkit_custom_scrollbar

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		 前のリビジョン
html_css:webkit_custom_scrollbar [2021/11/25 03:38] – 作成 ともやんhtml_css:webkit_custom_scrollbar [2021/11/29 11:40] (現在) – [参考文献] ともやん
行 4: 行 4:
 $less = new lessc; $less = new lessc;
 echo "<style>".$less->compile(<<< LESS echo "<style>".$less->compile(<<< LESS
-.wrap_mincode_long {+.wrap_mincode_long, .wrap_ncolor_result_long {
   pre {   pre {
     height: 100px;     height: 100px;
行 42: 行 42:
 </code> </code>
 </WRAP> </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]]\\ [[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]]\\
  
  • html_css/webkit_custom_scrollbar.1637779098.txt.gz
  • 最終更新: 2021/11/25 03:38
  • by ともやん