CSS로 스크롤 막대의 스타일을 지정하는 방법은 무엇입니까? CSS를 사용하여 스크롤 막대 스타일을 설정하는 방법

스크롤 막대는 이제 많은 프로젝트에서 사용되며 때로는 시뮬레이션된 스크롤 막대가 CSS 스타일을 사용하여 설정됩니다. 그러면 CSS로 스크롤 막대 스타일을 설정하는 방법은 무엇입니까? CSS로 스크롤 막대 스타일을 설정하는 방법은 무엇입니까?

1. 웹킷에서 CSS 스크롤바 설정

위는 스크롤바의 주요 설정 속성이며, 좀 더 자세한 CSS 속성이 있습니다.

:horizontal: 가로 스크롤 막대

:vertical: 세로 스크롤 바

:감소: 버튼과 내부 트랙 부분에 적용됩니다. 버튼이나 내부 트랙이 창의 위치를 ​​줄일지 여부를 나타내는 데 사용됩니다(예: 세로 스크롤 막대 위, 가로 스크롤 막대 왼쪽).

:increment: 감소는 유사하며 이를 나타내는 데 사용됩니다. 버튼이나 내부 트랙이 창의 위치를 ​​줄이는지 여부. 뷰포트의 위치를 ​​늘립니다(예: 세로 스크롤 막대 아래, 가로 스크롤 막대 오른쪽).

:start: 의사 클래스도 적용됩니다. 버튼과 슬라이더에. 개체가 슬라이더 앞에 배치되는지 여부를 정의하는 데 사용됩니다.

:end: 시작 의사 클래스와 유사하며 개체가 슬라이더 뒤에 배치되었는지 여부를 식별합니다.

:더블 버튼: 이 가상 클래스는 버튼과 내부 트랙에 사용됩니다. 버튼이 스크롤 막대의 동일한 끝에 배치된 버튼 쌍 중 하나인지 확인하는 데 사용됩니다. 내부 트랙의 경우 내부 트랙이 버튼 쌍 옆에 있는지 여부를 나타냅니다.

:단일 버튼: 이중 버튼 의사 클래스와 유사합니다. 버튼의 경우 버튼이 스크롤 막대 섹션에 독립적으로 있는지 여부를 결정하는 데 사용됩니다. 내부 트랙의 경우 내부 트랙이 단일 버튼 옆에 있는지 여부를 나타냅니다.

:no-button: 내부 트랙에 사용되며, 예를 들어 스크롤 막대 양쪽 끝에 버튼이 없는 경우 내부 트랙이 스크롤 막대 끝까지 스크롤되어야 하는지 여부를 나타냅니다.

:corner-present: 모든 스크롤 막대 트랙에 사용되며 스크롤 막대의 둥근 모서리가 표시되는지 여부를 나타냅니다.

:window-inactive: 모든 스크롤 막대 트랙에 사용되며 스크롤 막대가 적용된 페이지 컨테이너(요소)가 현재 활성화되어 있는지 여부를 나타냅니다. (최신 버전의 웹킷에서는 이 의사 클래스를 ::selection 의사 요소에도 사용할 수 있습니다. 웹킷 팀은 이를 확장하여 표준 의사 클래스가 되도록 홍보할 계획입니다.)

2. CSS 설정 스크롤 bar under IE

IE에서는 상대적으로 간단합니다. 맞춤 설정 항목이 적고 모두 색상입니다.

1.scrollbar-arrow-color: color; /*삼각형 화살표의 색상*/

2.scrollbar-face-color: /*3차원 스크롤바의 색상(배경색 포함) 화살표 부분)*/

3.scrollbar-3dlight-color: color /*3차원 스크롤 막대의 밝은 가장자리 색상*/

4.scrollbar-highlight-color: color; 스크롤바의 하이라이트 색상(왼쪽 그림자?)*/

5.scrollbar-shadow-color: color; /*3차원 스크롤바의 그림자 색상*/

6. color: color; /*3차원 스크롤 막대의 외부 그림자 색상*/

7.scrollbar- track-color: /*3차원 스크롤 막대 배경 색상*/

8, scrollbar- base-color:color; /*스크롤바 기본 색상*/

위는 CSS로 스크롤바 스타일을 설정하는 방법입니다. CSS로 스크롤바 스타일을 설정하는 방법에 대한 전체 소개입니다. CSS 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 CSS로 스크롤 막대의 스타일을 지정하는 방법은 무엇입니까? CSS를 사용하여 스크롤 막대 스타일을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!