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 중국어 웹사이트의 기타 관련 기사를 참조하세요!