스크롤 바 CSS 만들기, 수정, div 스크롤 바, 특정 구역 스크롤 바 따로 만들기 총정리

스크롤 바 만들기, 수정, div 스크롤 바, 특정 구역 스크롤 바 따로 만들기 총정리

div 스크롤 바, 특정 구역 스크롤 바 따로 만들기

---

 

제가 반응형 2 스킨을 수정하면서 알아낸게 있습니다.

 

IE랑 크롬이랑 스크롤 바를 플러그인을 쓰는게 아니라면 각각설정해줘야하며

 

크롬 브라우저에서 특정 div의 스크롤 바를 수정하는 방법이 구글에 나와있지 않다는거...

 

찾느라 얼마나 힘들었는데!!!

 

그래서 다시금 글을 써보도록 합니다.

 

 

제 블로그를 보시면 아시겠지만

 

화면 가장 오른쪽에있는 스크롤 바와 왼쪽 메뉴를 눌렀을 때 나오는 스크롤 바가

 

서로 다르다는것을 볼 수 있습니다. (크롬에서)

 

webkit이라는 다른 언어를 써서 그런가봅니다.

 

 

 

 

---

div 스크롤 바 수정하기

 

우리는 특정 div의 스크롤 바를 수정할것이니 div의 class를 알고있어야겠죠.

 

이제 어떻게 그 div의 스크롤 바를 수정하느냐

 

css로 가셔서 .clss이름::-webkit-~~

 

이렇게만 붙혀주시면 됩니다.

 

.area_sub::-webkit-scrollbar { width: 5.2px; }
.area_sub::-webkit-scrollbar-track { background-color:#5D5D5D; }
.area_sub::-webkit-scrollbar-thumb { background: #303030; }
.area_sub::-webkit-scrollbar-thumb:hover { background: #404040; }
.area_sub::-webkit-scrollbar-thumb:active { background: #808080; }
.area_sub::-webkit-scrollbar-button { display: none; }

 

그냥 ::-webkit-scrollbar { width: 5.2px; }라고 쓰면 화면 가장 오른쪽의 스크롤 바가 수정되는거죠

 

.area_sub::-webkit-scrollbar~를 몰라서 며칠을...

 

 

 

---

화면 가장 오른쪽 스크롤 바 수정하기

 

 

스크롤 바를 커스텀할 때 대부분 쓰이는게 아래 코드입니다.

 

부족하면 위의 사진을 보고 만드시면 되겠네요.

 

::-webkit-scrollbar { width: 5.2px; } /* 스크롤 바 */
::-webkit-scrollbar-track { background-color:#5D5D5D; } /* 스크롤 바 밑의 배경 */
::-webkit-scrollbar-thumb { background: #303030; } /* 실질적 스크롤 바 */
::-webkit-scrollbar-thumb:hover { background: #404040; } /* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */
::-webkit-scrollbar-thumb:active { background: #808080; } /* 실질적 스크롤 바를 클릭할 때 */
::-webkit-scrollbar-button { display: none; } /* 스크롤 바 상 하단 버튼 */

 

https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

How To Create a Custom Scrollbar

 

그리고 overflow-y:hidden 이런식으로 해버리면 스크롤 바는 나타나지 않지만 제대로 기능을 하지 않습니다.

 

 

 

---

스크롤바 보이지 않게 하기

 

그래서 html로 가서 특정 div안에 -ms-overflow-style: none;을 넣고

 

.area_sub::-webkit-scrollbar {display:none;}

 

이런식으로 넣으시면 보이지 않지만 제대로 기능을 하게됩니다.

 

 

 

---

IE에서 스크롤 바 수정하기

 

이렇게 크롬에서 스크롤 바를 커스텀 해봤으니 IE에서도 해보도록 하겠습니다.

 

 

ie에서 커스텀 스크롤 바를 보여줄려면 위 코드처럼 하시면 됩니다.

 

가장 오른쪽의 스크롤 바를 바꾸시려면 html{~}에 넣으시면되고

 

특정 div에서 커스터 하려면 .div의class이름 {~} 하시면 됩니다.

 

html{scrollbar-3dLight-Color: #FFB85A;scrollbar-arrow-color: black;scrollbar-Face-Color: #FF5E00;scrollbar-Track-Color: #efefef;scrollbar-DarkShadow-Color: #000000;scrollbar-Highlight-Color: #FF8224;scrollbar-Shadow-Color: #ED4C00;}

.area_sub{scrollbar-3dLight-Color: #363636;scrollbar-arrow-color: #363636;scrollbar-Face-Color: #363636;scrollbar-Track-Color: #484848;scrollbar-DarkShadow-Color: #363636;scrollbar-Highlight-Color: #363636;scrollbar-Shadow-Color: #363636;}

 

 

 

그러면 이렇게 ie에서도 스크롤 바를 수정할 수있습니다.

 

근데 아깝게도 width는 수정할 수 없다고 합니다.

 

플러그인 쓰면 된다고 하는데 페이지 로딩시간이 느려져서...

 

여기까지!