CSS를 사용하여 브라우저 스크롤 막대의 스타일을 수정하는 방법(자세한 예)

인터넷이 발전함에 따라 사람들은 사용하기 쉬울 뿐만 아니라 보기에도 좋은 페이지에 대한 요구 사항이 점점 더 높아지고 있습니다. 프런트엔드 개발자는 브라우저 스크롤 막대에 익숙합니다. 일부 내장 스크롤 막대가 우리의 미학을 만족시키지 못하는 경우 CSS를 사용하여 브라우저 스크롤 막대의 스타일을 수정하는 방법을 알고 계십니까? 오늘은 Div 스크롤바 스타일 설정 방법을 소개해드리겠습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

스크롤 막대 스타일을 사용자 정의하기 전에 먼저 스크롤 막대의 구조를 이해해야 합니다. 일반적으로 스크롤 막대는 두 부분으로 구성됩니다. 한 부분은 슬라이더라고 부르는 슬라이딩 부분이고, 다른 부분은 일반적으로 슬라이더의 트랙인 스크롤 막대의 트랙입니다. 모양, 슬라이더 색상이 트랙보다 어둡습니다.

먼저 스크롤바와 관련된 CSS 코드와 그 의미를 소개합니다.

::-webkit-scrollbar: 스크롤바의 전체 부분을 말하며 속성에는 너비, 높이, 배경 등이 포함됩니다.
::-webkit- 스크롤바 버튼: 스크롤바 양쪽에 있는 버튼을 의미합니다. 필요하지 않을 때는 display:none을 사용하여 숨길 수 있습니다.
::-webkit-scrollbar-track:은 외부 트랙 부분을 참조합니다. 필요하지 않은 경우에는 display:none을 사용하여 숨길 수 있습니다. 원하는 색상을 추가하세요
::-webkit-scrollbar-track-piece : 트랙 내부 부분, 즉 스크롤바의 중간 부분을 의미합니다
::-webkit-scrollbar-thumb : 드래그 가능한 부분을 의미합니다 스크롤 바, 즉 슬라이더
:: -webkit-scrollbar-corner: 모서리 부분을 의미합니다
::-webkit-resizer: 오른쪽 하단의 슬라이더 스타일을 정의하는 데 사용됩니다

하지만 가장 일반적으로 사용되는 것은 스크롤 막대(-webkit-scrollbar), 슬라이더(-webkit-scrollbar-thumb) 및 외부 트랙(-webkit-scrollbar-track)의 전체 부분입니다.

다음으로 div 상자의 남는 부분을 숨기고 div에 스크롤 막대 스타일을 설정한 다음 CSS를 사용하여 스크롤 막대 스타일을 구현하는 방법을 알아봅니다.

HTML 부분:

<div class="scroll">
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>    
    </div>

CSS 부분:

.scroll{
            margin:100px auto;
            border: 1px solid #000; 
            width: 200px;
            height: 300px;
            overflow: auto;
        }
        .scroll::-webkit-scrollbar {
            width: 10px;
           height: 10px;
        }
        /*正常情况下滑块的样式*/
        .scroll::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,.05);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*鼠标悬浮在该类指向的控件上时滑块的样式*/
        .scroll:hover::-webkit-scrollbar-thumb {
           background-color: rgba(0,0,0,.2);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*鼠标悬浮在滑块上时滑块的样式*/
        .scroll::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0,0,0,.4);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*正常时候的主干部分*/
        .scroll::-webkit-scrollbar-track {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
           background-color: white;
        }
        /*鼠标悬浮在滚动条上的主干部分*/
        .scroll::-webkit-scrollbar-track:hover {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
            background-color: rgba(0,0,0,.01);
        }

렌더링:

Note: 가로 스크롤 막대인 경우 width 속성이 작동하지 않으며, height는 스크롤 막대의 높이를 설정할 수 있습니다. 수직 스크롤 막대인 경우 높이는 아무런 영향을 주지 않으며, 너비는 스크롤 막대의 너비를 설정하는 데 사용될 수 있습니다. 직장에서 필요에 따라 원하는 스타일을 설정할 수 있습니다. 상호 작용을 하지 않은 친구들도 더 많이 시도하고 지식 포인트에 대한 이해를 깊게 할 수 있기를 바랍니다.

위 내용은 CSS를 사용하여 브라우저 스크롤 막대의 스타일을 수정하는 방법(자세한 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!