[CSS] 스크롤바 커스텀

#css #스크롤바커스텀

 

 

스크롤바 커스텀 사용 X

 

 

 

스크롤바 css 커스텀

 

 

body에 scrollbar를 커스텀하는 경우도 있지만 아직까지는 불편하다고 하는 클라이언트가 많은 듯 합니다.

다만 textarea, 게시판 list 등 커스텀 해야 좀 깔끔해 보여서 사용하는데 디자인이 누락되면 무난하게 사용하는 코드입니다.

(저거 하나 디자인 기다렸다가 작업하기에는 좀 답답하니까용)

 

 

HTML

 <textarea name="wr_content" id="wr_content" class="n-ipt"></textarea>

 

 

CSS

textarea.n-ipt::-webkit-scrollbar {
  width: 4px;
  background-color: rgb(209, 209, 209);
}
textarea.n-ipt::-webkit-scrollbar-thumb {
  background-color: rgb(125, 125, 125);
}

 

 

 

* 참고 *

-webkit-scrollbar : 전체 스크롤바

-webkit-scrollbar-thumb : 드래그 스크롤바

-webkit-scrollbar-track : 스크롤바 진행률 표시 바

-webkit-scrollbar-button : 스크롤바 화살표 모양 버튼

 

 

저는 위 2개만 사용해서 작업하는 편입니다.