CSS에서 스크롤 막대를 설정하는 방법은 무엇입니까? CSS 스크롤 막대를 설정하는 방법에 대한 자세한 예-CSS 튜토리얼-php.cn

CSS에서 스크롤 막대를 설정하는 방법은 무엇입니까? CSS 스크롤 막대를 설정하는 방법에 대한 자세한 예

不言

풀어 주다： 2018-09-14 13:39:54

원래의

17934명이 탐색했습니다.

웹 페이지 디자인에서는 스크롤 막대 디자인이 매우 필요하므로 텍스트나 그림이 컨테이너 크기를 초과하면 스크롤 막대 스타일이 나타납니다. 그러면 CSS에서 스크롤 막대를 설정하는 방법은 무엇입니까? 다음으로 CSS 스크롤바 설정 방법을 알려드리겠습니다.

먼저 CSS에서 스크롤 막대를 설정하는 데 필요할 수 있는 속성을 살펴보겠습니다.

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

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

auto: 콘텐츠가 제한 값을 초과할 때만 스크롤바 추가

hidden: 항상 스크롤바 숨기기
scroll: 항상 스크롤바 표시

2 높이: 높이를 설정합니다. 스크롤 막대의 (다음 값을 수정합니다.)

3. 스크롤 막대 색상 매개변수 설정:

scrollbar-3d-light-color 스크롤 막대의 밝은 테두리 색상을 설정하거나 검색합니다.

scrollbar-highlight-color 스크롤 막대 3D 인터페이스의 밝은 가장자리(ThreedHighlight) 색상을 설정하거나 검색합니다.

scrollbar-face-color 스크롤 막대 3D 표면의 색상을 설정하거나 검색합니다(ThreedFace)
scrollbar-arrow-color 스크롤 막대 방향 화살표의 색상을 설정하거나 검색합니다.
scrollbar-shadow-color 3D 표면의 색상을 설정하거나 검색합니다. 스크롤 막대의 어두운 가장자리(ThreedShadow) 3D 인터페이스
scrollbar-dark-shadow-color 스크롤 막대의 어두운 테두리(ThreedDarkShadow) 색상을 설정하거나 검색합니다.
scrollbar-base-color 스크롤 막대 기본 색상을 설정하거나 검색합니다.

다음으로, 스크롤 막대 스타일을 설정하기 위해 CSS를 살펴보겠습니다.

html 페이지에서는 전체 페이지의 스크롤 막대를 이와 같이 정의할 수 있습니다.

*{
scrollbar-3dlight-color:#D4D0C8; 
   scrollbar-highlight-color:#fff; 
   scrollbar-face-color:#E4E4E4; 
   scrollbar-arrow-color:#666; 
   scrollbar-shadow-color:#808080; 
   scrollbar-darkshadow-color:#D7DCE0; 
   scrollbar-base-color:#D7DCE0; 
   scrollbar-track-color:#;
}

로그인 후 복사

마지막으로 CSS에서 스크롤 막대를 설정한 후(가로, 세로) 숨기는 방법을 살펴보겠습니다

overflow-y:hiddencss를 사용하면 스크롤 막대를 숨길 수 있다고 말하는 사람이 많지만, div 요소에만 사용되며 브라우저를 숨길 수 없습니다. 일부 소스에서는 다음과 같이 말합니다. 스크롤 막대를 숨기려면 에 scroll="no"를 추가하고, 가로 스크롤 막대를 숨기려면 style="overflow-x:hidden"을 추가하세요. 수직 스크롤 막대를 숨기려면

1. 완전히 숨기기: 스크롤 막대를 숨기려면 scroll="no"를 추가하세요.

2. 필요하지 않을 때 숨기기: 브라우저 창의 너비나 높이가 페이지의 너비나 높이보다 클 때를 의미합니다. 스크롤 막대는 표시되지 않습니다. 그렇지 않으면 표시됩니다.

수평 스크롤 막대를 숨기려면

Add style=" Overflow-y:hidden"을 사용하여 세로 스크롤 막대 스크롤 막대를 숨깁니다.

최종 숨기기 방법:

추가

<style>html {
 overflow-x:hidden; //隐藏水平滚动条
 overflow-y:hidden;//隐藏垂直滚动条
 }
 </style>

로그인 후 복사