티스토리 뷰

프로그래밍/Frontend

[CSS] div 스크롤바 css로 꾸미기

돔돔이 2021. 10. 18. 20:46
728x90
반응형

 

스크롤바는 css에서 ::-webkit-scrollbar를 붙여서 꾸밀 수가 있답니다.

스크롤바 자체의 width를 변경하려면 ::-webkit-scrollbar { width: 5px; } 요런식으로 변경할 수 있는 것이죠

 

일반적으로 스크롤바가 아래이미지처럼 생겼는데,

래이미지로봤을 때

드래그해서 내려야되는 진한 스크롤바 css는 ::-webkit-scrollbar-thumb로,

진한 스크롤바를 제외한 연한 부분은  ::-webkit-scrollbar-track으로 수정할 수 있습니다.

 

 

 

예제를 보여드리기 위해 scrollDiv라는 클래스를 가진 div를 만들었어요.

스크롤바 넓이는 5px, 

스크롤바 바깥부분인 트랙의 색은 투명으로 바꿨고,

드래그해서 내려야되는 스크롤바는 파란색(blue)으로 변경했어요.

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>스크롤바 CSS</title>

    <style>
        .scrollDiv{
            background: orange;
            color: white;
            width: 200px;
            height: 100px;
            overflow-y: scroll;
        }
        .scrollDiv::-webkit-scrollbar {
          width: 5px;
        }
        .scrollDiv::-webkit-scrollbar-track {
          background-color: transparent;
        }
        .scrollDiv::-webkit-scrollbar-thumb {
          border-radius: 5px;
          background-color: blue;
        }
    </style>
</head>
<body>
    <div class="scrollDiv">
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
        <p>안녕하세요</p>
    </div>
</body>
</html>

 

저장한 뒤 html 파일을 열어보면 짜잔~

스크롤바가 파란색으로 바꼈어요!

 

div뿐만 아니라 html, body 등등 모든 곳에 ::-webkit-scrollbar를 붙여 꾸밀 수 있답니다!

 

끝!

728x90
반응형
저작자표시 비영리 변경금지

'프로그래밍 > Frontend' 카테고리의 다른 글

[javascript] dictionary key, value list로 가져오기  (0) 2021.10.25
[leaflet] 지도의 가장자리 꼭지점 좌표와 zoom level 값 가져오기  (0) 2021.10.20
[icon] Line Awesome icon 사용하는 방법  (0) 2021.10.13
[jquery/javascript] radio checked된 값 가져오기  (0) 2021.10.12
[jquery] ajax 비동기방식 호출하기  (0) 2021.10.12
댓글