📜 스크롤바 CSS 적용하기 ( feat. ::-webkit-scrollbar, 프론트앤드 )

결 론

::-webkit-scrollbar {

  height: 0px;

  width: 5px;

}

::-webkit-scrollbar-thumb {

  background-color: rgb(170, 165, 165);

  border-radius: 30px;

}

 

 

👀 Safari / Chrome 환경에서 동작하는 스크롤은 ::-webkit-scrollbar 을 이용해 CSS 조절이 가능하다.
사진은 CSS를 적용하지 않은 기본 스크롤바 화면으로, 간단한 css 적용을 통해 날씬이로 거듭날 수 있다.

 

 

날 것 그대로의 스크롤 바 ( It's raw )

 

Result

See the Pen by wkddkdud (@angpeng) on CodePen.

 

1. ::-webkit-scrollbar _ 스크롤바 전체 영역 조절

::-webkit-scrollbar {
  height: 0px; /*  x축 스크롤  */
  width: 5px;  /*  y축 스크롤  */
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

height을 통해 x축의 가로 스크롤 & width를 통해 y축의 세로 스크롤을 조절할 수 있으며,

height을 0으로 지정할 경우 x축에 overflow가 발생해도 스크롤 보이지 않아 깔끔한 화면이 가능하다. (넌 마치 카멜레온)

backgound 나 box-shawdow을 작성할 경우 스크롤에 색상이 적용된다. 작성하지 않을 경우 기본 배경색은 흰색이다.

 

 

2. ::-webkit-scrollbar-thumb _ 스크롤 생성되는 영역

::-webkit-scrollbar {  // 스크롤바 자체 영역
  height: 0px;
  width: 5px;
}

::-webkit-scrollbar-thumb { /* 스크롤 영역 */
  background-color: rgb(170, 165, 165);  /* 스크롤 영억 색상 조절 */
  border-radius: 30px;  /*  스크롤 말단 radius 조절  */
}

스크롤 영역을 확인할 수 있게 스크롤 영역에 색상( background-color )을 적용하고,
딱딱해 보이지 않게 스크롤 말단의 border의 각도를 조절해 둥글둥글한 느낌을 더해준다.

 

css 적용된 스크롤

이 외에도 다양한 css 속성이 존재한다.

3. ::-webkit-scrollbar-track _ 스크롤 영역 제외 부분

::-webkit-scrollbar {
  height: 0px;
  width: 5px;
  background-color:red;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(170, 165, 165);
  border-radius: 30px;
}

::-webkit-scrollbar-track{
  background-color:blue
}

4. ::-webkit-scrollbar-button: start:decrement & end:increment _ 스크롤 상하 이동 버튼 영역

::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment {
  height:40px;
  background-color: white;
}

흰색 영역의 상하 조절 버튼 확인할 수 있다.

5. ::-webkit-scrollbar-corner  _ x축 & y축 스크롤 접점 부분

::-webkit-scrollbar-corner {
      background-color: yellow;
}

Posted by Ang