css scrllbar 공통클래스로 스크롤 변경(커스텀스크롤바)

 

 이렇게 글이 많은 박스요소일경우

스크롤을 만들어주어 내용을 담아보자!

 

 

 

 

 

1.html , div class 지정

 

먼저 html로 

text 영역을 감고있는 부모에

css 클래스로 변경 가능하도록 이름지정

 

 

 

 

 

 

 

 

---

 

 

2. css공통이 아닌 개별 css로 제작

스크롤 변경은 이 개인정보 수집에만 들어가는 디자인으로, 웹사이트 전체에 적용되는 디자인이 아니다.

 

그러므로 기본 공통css 인 common 시트가 아닌

개인정보 수집이 들어가는 개별 css 시트에 스크롤 변경을 해준다.

 

 

  

 

스크롤 지정전 text box 모양

 

 

 

 

 

 

 

 

 

 

---

 

 

.inquiry_page .agree_wrap .txt_scroll {
    height: 154px;
    overflow: auto;
}

 

layout.css에 페이지 네임을 지정 

스크롤영역 크기 지정 height:154px 

overfow:auto 로 154px 이상은 보이게 스크롤처리

 

 

 

---

3. 스크롤바 디자인 주기

     

 

 

이렇게 브라우저 기본 스크롤 디자인을 

 

 

 

 

이렇게 이쁘게 나올수 있도록 변경해주자 

 

 

 

 

 

 

공통 클래스가 아니므로 

layout.css에 페이지에서 넓이5px 을 주고 배경을 투명하게 처리해준다. 

(-webkit- 은 브라우저 웹킷 엔진 속성이란 뜻으로 꼭 같이 사용)

.inquiry_page .agree_wrap .txt_scroll::-webkit-scrollbar {
    width:5px; background: transparent;  
}

이렇게만 주면 투명으로만 나오기 때문에 스크롤바 막대에 배경색을 지정해준다.

.inquiry_page .agree_wrap .txt_scroll::-webkit-scrollbar-thumb {
    background: #ddd;  
}

 

스크롤바 관련 션택자
::-webkit-scrollbar	스크롤바 전체
::-webkit-scrollbar-button	스크롤바의 버튼 (= 위/아래 표시 화살표)
::-webkit-scrollbar-thumb	드래그 가능한 스크롤 핸들 막대
::-webkit-scrollbar-track	스크롤바 트랙(진행률 표시줄)
::-webkit-scrollbar-track-piece	핸들로 덮이지 않은 트랙(진행률 표시줄)
::-webkit-scrollbar-corner	수평/수직 스크롤 막대가 만나는 스크롤 막대의 하단 모서리
::-webkit-resizer	일부 요소의 하단 모서리에 나타나는 드래그 가능한 크기 조정 핸들
IE와 파이어폭스 제외한 주요 최신 브라우저 모두 지원

 

 

 

4. 창 스크롤 디자인 적용

 

이제 바깥 브러우저 창에도 스크롤 디자인을 한다.

 

공통 클래스이기 때문에 common 시트에 적용해준다. 

/* 크롬,엣지 스크롤바 */
::-webkit-scrollbar { width:8px; background: #eee; }
/* 스크롤버튼 */
::-webkit-scrollbar-thumb { background: #999; border-radius: 8px;}

 

 

 

---

5. 완성 주의할점 

 

스크롤바 디자인이 공통클래스 . 개별 클래스에 적용된 모습.

 

 

스크롤 전체 변경시 

안쪽 박스 스크롤과, 창의 스크롤 모두 변경되니

클래스 명 다르게 수정하여 개별 시트로 css 디자인할것.