[2021.02.04] 브라우저 스크롤 기능 유지하면서 스크롤 바 없애기

 

<Select>, <Option> 태그를 작업하다가 내 맥북 환경 설정으로 인해 로컬에서 보이지 않던 UI적인 에러를 마주치게 되었다...

 

 

맥북 환경설정의 '일반'에서 스크롤 막대 보기에서 내 로컬 환경에서 View가 길면 스크롤 막대를 어떻게 보여줄지 선택할 수 있는 설정 기능이 있다.

 

'마우스 또는 트랙패드에 따라 자동으로' 혹은 '스크롤 할 때'를 선택하면 위 이미지처럼 기존의 페이지 상태를 유지한 채, 플로팅 방식으로 스크롤 막대가 살짝 비춰지는 방식으로 보여진다.

그러나 여기서 스크롤 막대보기 설정을 '항상'으로 하면 아래 처럼 된다...

 

스크롤을 보여지도록 설정을 해버리니, 아예 브라우저 화면 크기에서 스크롤 막대 영역에 대한 공간을 만들어 버린다..
이로 인해서 페이지 전체가 차지하는 공간이 맥북 환경설정으로 인해 차이가 발생해버렸다.

나 같은 경우에는 <Select>태그를 커스텀화 해서 작업했던 컴포넌트가 이번에 이러한 이슈로 인해 나도 모르게 아래처럼 보여지는 경우가 생겼던 것이다.

커스텀 option 내의 주황색 체크 표시가 right 기준으로 배치를 해놨는데, 스크롤 바가 오른쪽에 공간을 차지하면서 왼쪽으로 밀려버려서 디자인이 이상해진 것이다.

 

저 스크롤 바를 자바스크립트 내에서 없애는 방법을 찾아봤는데, 거의 그냥 스크롤 기능을 없애서 스크롤 바가 보이지 않도록 하는 overflow-y: hidden 밖에 안나온다...

그러다가 겨우 아래와 같은 코드를 찾을 수 있었다...!

  // Firefox 브라우저에서 스크롤 바 숨기기
  .element {
    scrollbar-width: none;
  }
  
  // webkit 렌더링 엔진에서 스크롤 바 숨기기
  .element::-webkit-scrollbar {
    /* This is the magic bit for WebKit */
    display: none;
  }