[CSS]Scrollbar 꾸미기

 

Scrollbar에 css로 디자인을 적용할 수 있습니다. 

 

::-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