CSS3에서 스크롤 막대 스타일을 사용자 정의하는 방법-CSS 튜토리얼-php.cn

CSS3에서 스크롤 막대 스타일을 사용자 정의하는 방법

清浅

풀어 주다： 2021-04-20 15:09:06

원래의

6425명이 탐색했습니다.

CSS3에서 스크롤 막대 스타일을 사용자 정의하는 방법: 먼저 HTML 샘플 파일을 만든 다음 요소에 "overflow:scroll"을 설정하여 스크롤 막대를 생성합니다. 마지막으로 스크롤 막대의 각 값을 설정하여 스크롤 막대 스타일을 다시 사용자 정의합니다. 속성.

CSS3에서 스크롤 막대 스타일을 사용자 정의하는 방법

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS3에서는 요소에 대한 Overflow:scroll을 설정하여 스크롤 막대를 생성한 다음 스크롤 막대 속성의 각 값을 설정하여 스크롤 막대의 스타일을 다시 사용자 정의할 수 있습니다.

스크롤 막대는 브라우저에서 필수적이며 일반적으로 고유한 기능 스크롤 막대는 웹 사이트를 더욱 눈길을 끌고 다르게 보이게 만듭니다. jQuery 플러그인을 사용하여 스크롤 막대를 사용자 정의할 수도 있습니다. 다음으로 이 기사에서는 CSS3를 사용하여 사용자 정의 스크롤 막대를 만드는 방법을 자세히 소개합니다

Overflow 속성:

콘텐츠가 넘칠 때 스타일을 주로 설정합니다(스크롤바가 한계를 넘어 표시되는지 여부)
overflow-x: 콘텐츠가 가로 방향으로 넘칠 때 설정

overflow-y: 콘텐츠가 넘칠 때 설정 세로 방향으로

세 가지 속성 설정 값은 다음과 같습니다: 표시(기본값), 스크롤, 숨김, 자동.

기본 스크롤 막대 스타일:

   <style type="text/css">
    .scrollbar {
        background-color: #F5F5F5;
        height: 300px;
        width: 65px;
        margin: 100px auto;
        overflow-y: scroll;//设置滚动条
    }
    .overflow {
        height: 450px;
    }
    </style>
</head>
<body>
    <div class="scrollbar" id="style-1">
        <div class="overflow"></div>
    </div>

로그인 후 복사

[추천 과정: CSS3 튜토리얼]

렌더링:

CSS3에서 스크롤 막대 스타일을 사용자 정의하는 방법

scrollbar 속성:

scrollbar-face-color: 3차원 스크롤 바 돌출부분 Color

scrollbar-arrow-color 위쪽 및 아래쪽 버튼에 있는 삼각형 화살표의 색상

scrollbar-highlight-color: 스크롤 막대의 빈 부분 색상

scrollbar-shadow-color: 스크롤바의 빈 부분 색상 3차원 스크롤 막대 테두리

참고: 이 속성은 IE 브라우저에서만 지원됩니다.

예:

 scrollbar-face-color:pink;

로그인 후 복사

Rendering:

CSS3에서 스크롤 막대 스타일을 사용자 정의하는 방법

사용자 정의 스크롤 막대 스타일:

-webkit-scrollbar: 전체 스크롤 막대 부분
-webkit-scrollbar-button: 스크롤 막대 양쪽 끝에 있는 버튼
-webkit-scrollbar-track: 외부 트랙
-webkit-scrollbar-track-piece: 내부 트랙, 스크롤 막대의 중간 부분 (삭제됨)
-webkit-scrollbar-thumb: 드래그 바
- webkit-scrollbar-corner: 코너
-webkit-resizer: 오른쪽 하단 모서리에 있는 드래그 블록의 스타일 정의

예:

<style type="text/css">
    .scrollbar {
        background-color: #F5F5F5;
        height: 300px;
        width: 65px;
        margin: 100px auto;
        overflow-y: scroll;

    }
    .overflow {
        height: 450px;
    }
    /*滚动条区域*/
#demo::-webkit-scrollbar{
  width:20px;
  background-color:#fff;
}
     /*滚动条*/
#demo::-webkit-scrollbar-thumb{
  background-color:#f196c4b3;

}
/*滚动条外层轨道*/
#demo::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px ;
    background-color:pink;
    border-radius: 10px;
}
    </style>
}

</head>
<body>
    <div class="scrollbar" id="demo">
        <div class="overflow"></div>
    </div>
</body>

로그인 후 복사

Rendering:

Image 3.jpg