[CSS] 스크롤바 배경 투명화

https://lionbum.tistory.com/111

[CSS 활용] 투명한 스크롤바 - 내용위에 오버레이 되는 스크롤바

https://inpa.tistory.com/entry/CSS-%F0%9F%8C%9F-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%B0%94Scrollbar-%EA%BE%B8%EB%AF%B8%EA%B8%B0-%EC%86%8D%EC%84%B1-%EC%B4%9D%EC%A0%95%EB%A6%AC

 

스크롤바 영역을 따로 놓는게 아닌 리스트들 위에 스크롤바가 올라갔으면 좋겠다고 생각해서 방법을 찾아보았다.

 &.active {
        overflow-y: overlay;
        max-height: 230px;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
        border-radius: 20px;
        &::-webkit-scrollbar {
            background: transparent;
            width: 10px;
        }
        &::-webkit-scrollbar-thumb {
            outline: none;
            background-color: hsla(0, 0%, 42%, 0.29);
            border-radius: 50px;
        }
    }

Overlay하면 된댔는데.

오버레이해도 안 됨. 왜?

https://leestrument.tistory.com/entry/%ED%88%AC%EB%AA%85%ED%95%9C-scroll-%EB%B0%94-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%B0%94-%EB%A7%8C%EB%93%A4%EA%B8%B0-overflow-overlay

https://caniuse.com/css-overflow-overlay

CSS overflow: overlay | Can I use... Support tables for HTML5, CSS3, etc

 

더이상 사용되지 않는 옵션이라고 한다.

 

&::-webkit-scrollbar-button:vertical:start:increment {
            display: block;
            height: 10px;
        }

그래서 이렇게 그냥 위에 여백을 주는 방식으로 했다.