스크롤바 투명으로 만들기 (scrollbar transparent mode)

스크롤바 투명으로 만들기 (scrollbar transparent mode). html과 css 함께 사용합니다.

 

 

알아보게 된 배경은 jquery ui의 resizing을 쓰면서 스크롤바 영역 아래 ui-resizable-handle 이 덮여버렸기 때문. ui-resizable-handle 이 덮이는 문제를 해결하기 전까지 스크롤바를 동작만 하고 투명으로 두기로 했습니다. 

 

 

html

 

 <div class="test" style="-ms-overflow-style: none;"></div>

 

CSS

 

::-webkit-scrollbar {
  display: none;
}

 

 

IE 스크롤바 커스터마이징 참고

 

scrollbar-base-color 
스크롤 바 전체 배경

scrollbar-face-color                  
상하좌우로 움직이는 부분(thumb), 
화살표가 포함된 상하좌우 끝 사각형 부분(button)

scrollbar-track-color                 
thumb을 제외한 나머지 부분

scrollbar-arrow-color                 
화살표

scrollbar-highlight-color, crollbar-3dlight-color           
thumb, button의 밝은 부분

scrollbar-darkshadow-color, scrollbar-shadow-color         
thumb, button의 어두운 부분