CSS3 사용자 정의 스크롤 막대 스타일: webkit-scrollbar에 대한 자세한 설명

브라우저와 함께 제공되는 원래 스크롤 막대가 매우 보기 흉하다고 생각한 적이 있습니까? 동시에 많은 웹사이트의 사용자 정의 스크롤 막대가 심지어 chrome32.0 개발 보드도 포기한 것으로 나타났습니다. 훨씬 더 아름다운 원래 스크롤 막대. 그렇다면 웹킷 브라우저는 스크롤 막대를 어떻게 사용자 정의합니까?

머리말

Webkit은 오버플로 속성, 목록 상자, 드롭다운 메뉴 및 텍스트 영역 스크롤 막대 사용자 정의 스타일이 있는 영역을 지원하므로 매우 유용합니다. 물론 현재 모든 브라우저와 호환되는 스크롤 막대 스타일은 없습니다.

Demo

두 개의 스크롤 막대 데모를 살펴보겠습니다: 데모1(그림 버전), 데모2(순수 CSS3 버전)

스크롤 막대 구성

• ::-webkit-scrollbar scroll bar

• ::-webkit-scrollbar-thumb 스크롤 막대의 작은 사각형은 위아래로 이동할 수 있습니다(또는 세로 스크롤 막대인지 가로 스크롤 막대인지에 따라 왼쪽과 오른쪽)

• ::-webkit-scrollbar -track 스크롤 막대 트랙(내부에 Thumb 포함)

• ::-webkit-scrollbar-button 스크롤 막대 트랙의 양쪽 끝에 있는 버튼을 사용하면 작은 스크롤 막대의 위치를 ​​미세 조정할 수 있습니다. 클릭하면 정사각형이 됩니다.

• ::-webkit-scrollbar-track-piece 내부 트랙, 스크롤 막대의 중간 부분(제거됨)

• ::-webkit-scrollbar-corner 모서리, 즉 교차점 두 개의 스크롤 막대

• ::-webkit-resizer 두 개의 스크롤 막대의 교차점을 드래그하여 요소의 크기를 조정하는 데 사용되는 작은 컨트롤

간단한 버전

자세한 코드는 여기에 게시되지 않습니다. 데모에서 소스 코드를 볼 수 있습니다. 특정 스타일에 대한 설정을 찾아보세요. 데모2

의 두 번째 스크롤바 스타일을 살펴보겠습니다.

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
	width: 16px;
	height: 16px;
	background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

세부 설정

스크롤바를 정의하는 것은 의사 요소와 의사 클래스를 사용하는 것입니다. 그러면 의사 요소와 의사 클래스는 무엇일까요?

당신은 의사 클래스 :link, :focus, :hover에 익숙해야 합니다. 또한 :nth-child, :last-child, :nth와 같은 많은 의사 클래스 선택기가 CSS3에 추가되었습니다. -마지막 유형()기다립니다.

이전에 CSS에서 의사 요소를 본 적이 있습니다: :first-line, :first-letter, :before, :after. 그런 다음 CSS3에서는 의사 요소가 조정되고 이전 요소에 ":"가 추가되어 이제 "::first-letter,::first-line,::before,::after"가 됩니다. 게다가 CSS3는 "::selection"도 추가합니다. 두 개의 "::"과 하나의 ":"는 주로 CSS3에서 의사 클래스와 의사 요소를 구별하는 데 사용됩니다.

Webkit의 의사 클래스 및 의사 요소 구현은 매우 강력합니다. 스크롤 막대는 페이지 요소로 정의될 수 있으며 그라데이션, 둥근 모서리, RGBa 등과 같은 일부 고급 CSS3 속성과 결합될 수 있습니다. 그런 다음 어떤 장소에서 이미지를 사용해야 하는 경우 이미지를 Base64로 변환할 수도 있습니다. 그렇지 않으면 매번 여러 이미지를 로드해야 하고 요청 수가 늘어납니다.

테두리, 그림자, 배경 이미지 등 모든 개체를 설정할 수 있습니다. 생성된 스크롤 막대는 운영 체제 자체의 설정에 따라 대화형 동작을 계속 완료합니다. 위의 의사 요소에는 다음과 같은 의사 클래스가 적용될 수 있습니다. 작성 방법에 대한 자세한 내용은 첫 번째 데모를 참조하세요.

아아아아

위 내용은 CSS3 사용자 정의 스크롤 막대 스타일: webkit-scrollbar에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!