스크롤 막대 스타일 설정을 위한 CSS 예제 코드

이 글은 CSS 스크롤바 스타일 설정의 예제 코드를 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다.

CSS 스크롤바 스타일 설정 구현 코드는 다음과 같습니다.

•: :-webkit-scrollbar 스크롤 막대의 필수 부분

•::-webkit-scrollbar-thumb 스크롤 막대 내부의 작은 사각형은 수직인지 여부에 따라 위아래로(또는 왼쪽과 오른쪽으로) 이동할 수 있습니다. 스크롤 막대 또는 가로 스크롤 막대)
•::-webkit-scrollbar-track 스크롤 막대 트랙(내부에 Thumb 포함)
•::-webkit-scrollbar-button 스크롤 막대 트랙의 양쪽 끝에 있는 버튼을 사용하면 미세 조정이 가능합니다. - 작은 사각형을 클릭하여 위치를 조정합니다.
•::-webkit-scrollbar-track-piece 내부 트랙, 스크롤 막대의 중간 부분(제거됨)
•::-webkit-scrollbar-corner 모서리, 즉 두 스크롤 막대의 교차점
•::-webkit -resizer는 드래그를 통해 요소의 크기를 조정하기 위한 두 스크롤 막대의 교차점에 있는 작은 컨트롤입니다. 의사 클래스는 무엇입니까?

모든 사람은 의사 클래스인 link, :focus, :hover에 익숙해야 합니다. 또한 :nth-child, :last-child, :nth-last와 같은 많은 의사 클래스 선택기가 CSS3에 추가되었습니다. -of-type() 잠깐만요.

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

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

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

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;
}

위 내용은 스크롤 막대 스타일 설정을 위한 CSS 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!