たぶんPC以外では関係ないんですけども、「Twenty Twenty-Two」のwebkit系のスクロールバーがよく見たら放送禁止用語で罵倒したい程度には見難いものだったので手を加えました。

（後から気づいたのですがテーマファイルのどこにもスクロールバーの記述がなくてあの果てしなく見難いスクロールバーはどこから来たのか不安になっているのですが、どれかのプラグインと競合した…？だったらテーマは冤罪かもしれない。）

モバイル端末のブラウザのように動きがあったときだけ表示みたいな感じにしたいのだけれど私の腕だとCSSだけでは不便なのができそうだったので、適度に「それなりに見やすい」を目標に調整しました。プラグインやjqueryを使ってまで実行したいわけではない為。

body {
	overflow: overlay;
}

body::-webkit-scrollbar {
	background: transparent;
}

body::-webkit-scrollbar-thumb {
	background: rgba(90,90,100,0.9);
	border-radius: 5px;
	border: 3px solid transparent;
	background-clip: padding-box;
}

body::-webkit-scrollbar-track {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 5px;
}

body::-webkit-scrollbar-track:hover {
	background: rgba(0,0,0,0.6);
	border: 3px solid transparent;
	background-clip: padding-box;
}

body::-webkit-scrollbar-corner {
	background: transparent;
}

バートラックは普段は透過でホバー時だけ範囲を表示するように。トラックで四方のマージンを指定しているけれども、本来縦横バーは擬似クラスで分けて個別に指定するべきなんだろうなと思いつつ、それもなにかムズムズするという理論にてこんな指定とあいなりました。レスポンシブだし横バーは滅多にみないでしょうし適当適当。

無駄なこともしてそうなのですがこれが精一杯。