[CSS] 스크롤시에만 스크롤바 보여주기

안녕하세요.
마우스오버 할때만 스크롤바가 생기면 보기 좋은데 많이 안쓰시는거 같습니다.
overflow auto로 하면 사이즈가 긴 페이지는 항상 스크롤바가 존재 하게 됩니다.
스크롤바는 꾸밀수 있는 요소가 많고 정보도 많은데, 안쓸때 숨기는 정보는 많이 없더군요.

<style>
.div-scroll  {
    overflow-y: hidden;
    overflow-x: hidden;
    min-height: 120px;
    max-height: 200px;
    transition: all 0.4s ease;

    &:active, &:hover {
        overflow-y:auto;
    }

    &::-webkit-scrollbar {
        width: 5px;
    }

    &::-webkit-scrollbar-thumb {
        height: 6px;
        border-radius: 10px;
        visibility: hidden;
    }
    &::-webkit-scrollbar-track {
        visibility: hidden;
    }
    &:active::-webkit-scrollbar-thumb, &:hover::-webkit-scrollbar-thumb, &:focus::-webkit-scrollbar-thumb {
        visibility: visible;
        background: #d99090;
    }
}

</style>
<div class="div-scroll"> 
<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.</p>
</div>

코드를 보면 기본적으로 overflow를 히든으로 하고 active와 hover 상태에 overflow를 auto로 하여 스크롤이 보이도록 했습니다. 트랙은 그냥 숨긴 상태이고 스크롤바는 기본적으로 숨기고 active 상태가 되면 보이게 됩니다.

See the Pen Make scrolling visible on mouse hover by Terry Yang (@Terry-Yang) on CodePen.