wv-2503~2505-02 (스크롤바 작업 중 기록 / 스크롤바 CSS 속성)

스크롤바 작업중이었다.

아.. 난관에 봉착했다.

뭐가 문제인가?

스크롤바 상단, 하단의 여백이 없어서

border-radius가 들어간 영역에서는 스크롤바가 보기 좋지 않다.

아래와 같이 말이다..

 

 

라운드가 아닌 직각 박스안에서는 크게 문제 될 것은 없어보이나,

모서리가 둥근 박스에서는 스크롤바가 ..

 

UI작업 하면서 매번 고민과 고통을 주는 요소들이 있다.

요즘에는 SWIPER 커스텀, 그리고 스크롤바가 그것이다.

디자이너가 원하는 스크롤바는 구현하기 쉽지 않다.

애초에 스크롤바를 CSS로 커스텀하기가 .. 고되다.

 

(MDN에서도 말한다. 

'스크롤바 스타일을 지정하는 것은 피해야 합니다. 스크롤바의 모양을 기본 설정에서 변경하면 외부 일관성이 깨져 사용성에 부정적인 영향을 미치기 때문입니다. '

라고..)

 

 

위에는 CSS를 수정한 후의 스크롤바 모습이다.

 

&::-webkit-scrollbar-track-piece {
        margin-top: 1.2rem;
        margin-bottom: 1.2rem;
    }

 

바로 요놈을 추가했다. 

아래는 이 선택자에 대한 MDN 설명이다.

출처 : MDN( https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar)

 

핸들에 의해 가려지지 않은 트랙 부분!

에 margin을 주어 여백을 줬다.

 

여기서 당연히 실험을 했다. padding 은 되는가? 

안 된다. 여백이 안 생긴다.

 

이번 작업에서 스크롤바 커스텀에 사용된 선택자는 아래와 같다.

피그마와 똑같이 만들기 진짜.. 어렵다. 

디자이너는 UI개발에 대해 모를 수 있으니까.. 어쩔 수 없다.

협의를 하던가! 아니면.. 되게 만들던가!! 악!!!!