css를 이용하여 투명한 스크롤바 만들기

제대로 정리가 된 곳이 없어 이래저래 혼자 해결을 했다.

1
2
3
4
body::-webkit-scrollbar {
    width: 10px;
    background: transparent;
}
cs

이곳의 코드를 참고하여 시작했다. 배경이 위 사이트처럼 별것이 없다면, 이렇게 해준 뒤 적절하게 scrollbar thumb의 색을 변경해주면 된다.

그런데, background-image가 들어가거나 하는 상황이 발생하면 작동하지가 않는다.

엄밀히 말하자면, 스크롤 바 트랙의 색상이 다시 생겨버린다.

허나 배경이 단색이면 도대체 스크롤 바가 투명일 필요가 없지 않을까. 그냥 똑같은 색으로 지정을 해주면 되니까. 나 또한 이런 상황이라 많이 곤란했는데,

1
2
3
4
5
html, body {
    width:100vw; /* or % */
    height:100vh; /* or % */
    overflow-x: hidden;
}
cs

일단은 이렇게 해결했다.

티스토리툴바