스크롤바 style

/* 수직 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 12px; /* Chrome, Safari, Opera */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* 스크롤바 손잡이 색상 */
  border-radius: 6px; /* 스크롤바 손잡이 모서리 둥글기 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 스크롤바 손잡이 호버 색상 */
}

/* 수평 스크롤바 스타일 */
::-webkit-scrollbar-horizontal {
  height: 12px; /* Chrome, Safari, Opera */
}

::-webkit-scrollbar-thumb:horizontal {
  background-color: #888; /* 수평 스크롤바 손잡이 색상 */
  border-radius: 6px; /* 수평 스크롤바 손잡이 모서리 둥글기 */
}

::-webkit-scrollbar-thumb:hover:horizontal {
  background-color: #555; /* 수평 스크롤바 손잡이 호버 색상 */
}

 

728x90

 

/* Internet Explorer용 코드 */
html {scrollbar-3dLight-Color: #efefef; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; scrollbar-DarkShadow-Color: #efefef; scrollbar-Highlight-Color: #efefef; scrollbar-Shadow-Color: #efefef}
/* Chrome, Safari용 스크롤 바 */
::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url('./images/bg.png') #efefef}
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}

 

※  Firefox는 ::-webkit-scrollbar와 같은 -webkit 접두사를 지원하지 않습니다. 따라서 Firefox를 위한 스크롤바 스타일은 다른 접두사 없이 CSS를 사용해야 합니다.

 

/* 수직 스크롤바 스타일 - Firefox */
scrollbar-color: #888 #f1f1f1;
scrollbar-width: thin;

/* 수평 스크롤바 스타일 - Firefox */
scrollbar-color: #888 #f1f1f1;
scrollbar-width: thin;