티스토리 뷰

WebPublisher/CSS

[css] 스크롤바 커스텀 CSS

amanda 2023. 3. 13. 17:13

스크롤바 스타일에 대한 웹표준은 따로 없다

 

webkit 브라우저에 한해서만 커스텀 가능하며 주로 사용하는 속성은 아래 3가지

 

body::-webkit-scrollbar {
    /* 스크롤 전체 영역 */
    width: 10px;
}

body::-webkit-scrollbar-thumb {
    /* 스크롤바 막대 */
    height: 30%;
    background-color: #666;
}

body::-webkit-scrollbar-track {
    /* 스크롤바 배경 */
    background-color: #ddd;
}

 

 

참고

https://developer.mozilla.org/ko/docs/Web/CSS/::-webkit-scrollbar

 

::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN

CSS 의사 요소 ::-webkit-scrollbar 는 요소에 overflow:scroll;이 설정되어 있을 때 해당 요소의 스크롤바 스타일에 영향을 끼칩니다.

developer.mozilla.org

 

저작자표시

'WebPublisher > CSS' 카테고리의 다른 글

[css] print / 프린트용 페이지 style 2  (0) 2023.08.17
[CSS] blind  (0) 2023.08.17
[print] 프린트 페이지 작업하는 방법 (인쇄 영역 테두리 이미지로 삽입, page-break)  (0) 2022.12.23
[mail form] 메일폼 editor와 view에서 스타일 맞추기  (0) 2022.12.13
[html] 텍스트 들여쓰기, ol 시작 숫자 변경  (0) 2022.11.23