[ CSS ] scroll bar 스크롤바 꾸미기 2탄

JooKit 주킷 2020. 9. 2. 18:44
목차 접기
728x90
반응형
::-webkit-scrollbar {
					/* 스크롤바 전체 영역 */
  width: 10px;
} 
::-webkit-scrollbar-track {
					/* 스크롤이 움직이는 영역  */
      background-color: #f9f9f9;
} 
::-webkit-scrollbar-thumb {
					/*  스크롤  */
      background-color: gold; 
  border-radius:30px;
} 
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment {
					/*  스크롤의 화살표가 포함된 영역   */
  display:block;
  height:8px;
  background-color: #000;
} 
::-webkit-scrollbar-corner {
					/*  상하+좌우 스크롤이 만나는 공간   */
      background-color: red;
} 












/* 스크롤 상하방향 */

::-webkit-scrollbar-button:vertical:incremen
::-webkit-scrollbar-button:vertical:decrement


/* 스크롤 좌우방향 */
::-webkit-scrollbar-button:horizontal:increment 
::-webkit-scrollbar-button:horizontal:decrement 

위, 아래 모두 복붙해서 사용하면 된다.

728x90
반응형
LIST