https://let.blog.jp/article/17550731

:hover で overflow を切り替えるだけ
スクロールバーデザインも変えてモバイル風味にしてみた

webkit-scrollbar 系には opacity 効かないし背景を透明にしても裏側は見れない
-webkit-scrollbar-thumb の background は設定できるけど transition でアニメーションしない
JavaScript で徐々に背景色の alpha 値変えればいけそうだけど CSS で収めたかったのでやってない

<!doctype html>

<style>
	* {
		box-sizing: border-box;
	}

	.box {
		width: 200px;
		height: 300px;
		border: 2px solid #c4cf8a;
		overflow: hidden;
	}

	.box:hover {
		overflow: overlay;
	}

	.box::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.box::-webkit-scrollbar-thumb {
		background: #aaa;
		border-radius: 5px;
	}
</style>

<div class="box"></div>

<script>
	const b = document.querySelector(".box")
	b.innerHTML += ("12345".repeat(10) + "<br/>").repeat(100)
</script>