방명록
- scrollbar (스크롤바) css2021년 03월 13일 15시 38분 03초에 업로드 된 글입니다.작성자: 루루개발자
html에서 element의 scrollbar를 css로 스타일 지정할 수 있으며, 해당 내용은 w3school 사이트에도 나와있습니다.
www.w3schools.com/howto/howto_css_custom_scrollbar.asp
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-button:start
::-webkit-scrollbar-button:end
::-webkit-scrollbar-button:vertical:increment
::-webkit-scrollbar-button:vertical:decrement
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-cornerscrollbar와 관련된 css 선택자들은 위와 같이 여러개가 있는데,
이 중에 아래처럼 5개 선택자만 지정해보도록 하겠습니다.
.box::-webkit-scrollbar { width: 28px; height: 28px; } .box::-webkit-scrollbar-track { background-color: #eeeeee; } .box::-webkit-scrollbar-thumb { background-color: #cccccc; } .box::-webkit-scrollbar-button:start { background-color: #8d9cba; } .box::-webkit-scrollbar-button:end { background-color: #80b98a; }
위와 같이 css 지정할 경우 각 브라우저별로 다음과 같이 표시됩니다.
파이어폭스와 인터넷익스플로러, 그리고 사파리에서는 적용되지 않고
카카오톡 인앱 브라우저에서는 스크롤바 버튼에 적용되지 않는 모습을 확인 할 수 있습니다.
'CSS' 카테고리의 다른 글
CSS 가 적용되는 우선순위 (0) 2024.01.24 CSS 에서 사용하는 길이 단위 (0) 2022.10.02 ul, ol 태그에서 커스텀 마커 사용하는 방법 (1) 2022.07.05 bell shake 애니메이션 예제 (0) 2022.05.12 infinity rotate 애니메이션 예제 (0) 2022.05.11 다음글이 없습니다.이전글이 없습니다.댓글