CSS3에서 스크롤 막대 스타일을 사용자 정의하는 방법
- 清浅원래의
- 2018-12-08 10:45:036365검색
CSS3에서 스크롤 막대 스타일을 사용자 정의하는 방법: 먼저 HTML 샘플 파일을 만든 다음 요소에 "overflow:scroll"을 설정하여 스크롤 막대를 생성합니다. 마지막으로 스크롤 막대의 각 값을 설정하여 스크롤 막대 스타일을 다시 사용자 정의합니다. 속성.
이 기사의 운영 환경: 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 튜토리얼]
렌더링:
scrollbar 속성:
scrollbar-face-color: 3차원 스크롤 바 돌출부분 Color
scrollbar-arrow-color 위쪽 및 아래쪽 버튼에 있는 삼각형 화살표의 색상
scrollbar-highlight-color: 스크롤 막대의 빈 부분 색상
scrollbar-shadow-color: 스크롤바의 빈 부분 색상 3차원 스크롤 막대 테두리
참고: 이 속성은 IE 브라우저에서만 지원됩니다.
예:
scrollbar-face-color:pink;
Rendering:
사용자 정의 스크롤 막대 스타일:
-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:
요약: 이상이 이 글의 전체 내용입니다. 이 글을 통해 사용자 정의 스크롤바를 만드는 방법을 배울 수 있기를 바랍니다.
위 내용은 CSS3에서 스크롤 막대 스타일을 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!