CSS에 스크롤 막대를 추가하는 방법

CSS에서는 오버플로 속성을 사용하여 스크롤 막대를 설정할 수 있습니다. 요소에 "overflow:scroll" 스타일만 추가하면 됩니다. 이 속성은 요소의 콘텐츠 영역을 초과하는 콘텐츠를 처리하는 방법을 정의합니다. 값이 스크롤이면 사용자 에이전트는 필요 여부에 관계없이 스크롤 메커니즘을 제공합니다.

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

1.overflow 속성을 사용하여 스크롤 막대 표시 여부를 설정할 수 있습니다.

이 속성은 요소의 콘텐츠 영역을 오버플로하는 콘텐츠를 처리하는 방법을 정의합니다. 값이 스크롤이면 사용자 에이전트는 필요 여부에 관계없이 스크롤 메커니즘을 제공합니다. 따라서 모든 콘텐츠가 요소 상자 안에 들어가더라도 스크롤 막대가 나타날 수 있습니다.

overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll  /*只是y方向*/

overflow-y: 개체의 콘텐츠가 지정된 높이를 초과할 때 콘텐츠를 관리하는 방법을 설정합니다.

overflow-x: 개체의 콘텐츠가 지정된 너비를 초과할 때 콘텐츠를 관리하는 방법을 설정합니다.

　 매개변수:

　 표시: 영역을 확장하여 모든 콘텐츠 표시

자동: 콘텐츠가 제한 값을 초과할 때만 스크롤 막대 추가

숨김: 항상 스크롤 막대 숨기기

스크롤: 블록 수준 콘텐츠일 때 항상 스크롤 막대 표시

영역이 블록 수준 요소의 범위를 초과하면 스크롤 막대 형태로 표시됩니다. 내부 콘텐츠를 스크롤할 수 있으며, 내부 콘텐츠는 블록 수준 영역을 초과하지 않습니다.

2. 스크롤바 속성을 사용하여 스크롤바 스타일을 설정하세요

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

• ::-webkit-scrollbar-button 스크롤바 양쪽 끝에 있는 버튼 스크롤 바

• ::-webkit -scrollbar-track 외부 트랙

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

• ::-webkit -scrollbar-thumb 스크롤 막대 내부를 드래그할 수 있습니다.

• ::-webkit-scrollbar-corner Corner

• ::-webkit-resizer는 오른쪽 하단 모서리에 있는 드래그 블록의 스타일을 정의합니다.

예:

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-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 비디오 튜토리얼

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