CSS 스크롤 막대의 너비를 설정하는 방법

CSS에서 스크롤 막대의 너비를 설정하는 방법: 1. "::-webkit-scrollbar" 의사 클래스 선택기를 사용하여 전체 스크롤 막대를 선택합니다. 2. 전체 스크롤 막대의 너비를 너비로 설정합니다. 속성이며 구문 형식은 "::- webkit-scrollbar{width:width value;}"입니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

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

CSS에서는 "::-webkit-scrollbar" 의사 클래스 선택기와 너비 속성을 사용하여 스크롤 막대의 너비를 설정할 수 있습니다. 구문 형식은 다음과 같습니다.

::-webkit-scrollbar{
width:宽度值;
}

다음 의사를 사용할 수도 있습니다. -다양한 웹킷을 수정하기 위한 요소 선택기 브라우저 스크롤 막대 스타일:

• ::-webkit-scrollbar 스크롤 막대의 전체 부분

• ::-webkit-scrollbar-thumb 스크롤 막대 내부의 작은 사각형(예: 스크롤 막대 슬라이더)는 위쪽으로 이동할 수 있습니다. 아래로 이동합니다(또는 수평 스크롤 막대는 왼쪽에서 오른쪽으로 이동할 수 있습니다)

• ::-webkit-scrollbar-track 스크롤 막대의 트랙(그림의 스크롤 막대 홈에 해당) 위에는 Thumb, 즉 스크롤 막대 슬라이더가 포함되어 있습니다)

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

• ::-webkit-scrollbar-corner 두 스크롤 막대의 모서리 Intersection

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

• : :-webkit-resizer 두 스크롤 막대의 교차점에서 드래그하여 요소의 크기를 조정하는 데 사용됩니다. 작은 컨트롤

/*滚动条样式*/
.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
        width:4px;/*高宽分别对应横竖滚动条的尺寸*/
        height:4px;
}
.cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgba(0,0,0,0.2);
}
.cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgba(0,0,0,0.1);
}

예:

1., 스타일 부분

<style>
        /*定义滚动条样式（高宽及背景）*/ 
        ::-webkit-scrollbar { 
            width: 6px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
            background: #007acc;
        } 
        /*定义滚动条轨道（凹槽）样式*/ 
        ::-webkit-scrollbar-track { 
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
            border-radius: 3px; 
        } 
        /*定义滑块 样式*/ 
        ::-webkit-scrollbar-thumb { 
            border-radius: 3px; 
            height: 100px;    /* 滚动条滑块长度 */
            background-color: #ccc; 
        }
    </style>

2, 본문 부분

<div style="height: 200px;overflow-y: scroll;background: #52cc8f;">
        11111111
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
    </div>

렌더링:

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS 스크롤 막대의 너비를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!