맥 크롬 스크롤바 - maeg keulom seukeulolba

맥OS를 사용할 경우, 크롬 및 사파리 브라우져에서 결과물을 출력할때, 스크롤바가 표시되지 않는 경우가 있다.

프론트 개발을 병행 한다면, 기본적 설정을 변경해두는것이 좋다.

간단한 설정을 통해서 스크롤바를 출력할 수 있다.

설정방법

맥OS 기본 설정 값은 '마우스 또는 트랙패드에 따라 자동으로' 로 설정되어있다.

설정 > 일반 > 스크롤 막대 보기 탭에서 '항상' 으로 변경하면 된다.

스크롤바가 사라지지 않는다면

어느 날부터인가 크롬브라우저에서 스크롤바가 사라지지 않는다.

암만 구글링해봐도 스크롤바를 계속 보이게 하는 방법만 나오고, 없애는 방법은 없다. 그것도 설정앱에서 하는 방법으로는 아무리 해봐도 없어지지 않는다.

혹시나 싶어서 찾아보니 기본값 설정해는 곳에 앱별로도 가능하였다.

$ defaults find scrollbars
Found 1 keys in domain ‘Apple Global Domain’: {
    AppleShowScrollBars = WhenScrolling;
}
Found 1 keys in domain ‘com.google.Chrome.canary’: {
    AppleShowScrollBars = WhenScrolling;
}
Found 1 keys in domain ‘com.google.Chrome’: {
    AppleShowScrollBars = Always;
}
Found 1 keys in domain ‘com.kakao.KakaoTalkMac’: {
    AppleShowScrollBars = Automatic;
}

요걸 몰랐네~?

$ defaults write com.google.Chrome AppleShowScrollBars Automatic

크롬을 재시작하니 이제 사라진다. ㅠㅠ

기술 자료

익명으로 소통할 수 있는 플랫폼을 만드는 팀 프로젝트를 진행하다가, 사용환경이 동일한(macOS, 크롬브라우저) 팀원들 사이에서 스크롤바가 다르게 보이는 현상이 발생됐다.

<style>
element.style {
}
.list-board > li > .content {
    max-height: 160px;
    overflow-y: scroll;
    padding: 15px 0;
    line-height: 20px;
    color: #777;
}
</style>

해당 요소에 overflow-y:scroll로 설정되어있어 항상 스크롤 트랙이 생기기 때문에 없애는게 좋겠다는 의견을 이야기하던 중이였다. 그러나 어떤 팀원은 스크롤 트랙이 보이지 않았다.

심지어 모두 맥북을 사용하고, 크롬 브라우저를 사용하며 버전도 모두 같았기에, 의문이 가득했다. 그때 스크롤 트랙이 보이지 않는 팀원과 딱 한가지 다른 조건이 있었는데, 그게 바로 트랙패드를 사용한다는 것이였다. 언뜻보면 스크롤바와 트랙패드가 무슨 연관이 있나 싶겠지만, 맥 설정에서 일반에 스크롤에 관한 설정을 보면 마우스 또는 트랙패드에 따라 자동으로 라고 설정되어있다.

한 팀원이 연결된 블루투스 마우스의 연결을 해제하고 트랙패드로 사용하니, 스크롤이 없어졌다! (충격) 보통 트랙패드로 스크롤을 할 때는 스크롤바를 이용하지 않으니 content가 넘치지 않았기에 스크롤 트랙이 overflow-y:scroll이더라도 보이지 않았던 것 같다.

사용자의 환경에 따라 이렇게 세심한 부분에서 차이가 발생하는구나를 느꼈고 사용자의 편의를 위해, 필요할 때만 스크롤바가 생성되는 overflow: auto를 사용해 브라우저에게 스크롤바의 표시 선택권을 넘겨줘야한다는 것을 다시한번 배운 시간이였다.

참고자료
https://yceffort.kr/2021/01/overflow-auto-scroll
https://css-tricks.com/almanac/properties/s/scrollbar-color/