文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 ====== 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]]\\ html_css/webkit_custom_scrollbar.txt 最終更新: 2021/11/29 11:40by ともやん