CSS에서 스크롤 막대를 숨기는 방법

방법: 1. "overflow-y:scroll" 문을 사용합니다. 2. "overflow-x:hidden;overflow-y:auto;" 문을 사용합니다. 3. "margin-right:-15px;margin-"을 사용합니다. 하단: -15px;" 진술.

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

방법 1

코드는 다음과 같습니다.

html { overflow-y: scroll; }

원리: IE의 세로 스크롤 막대를 강제로 표시하고 가로 스크롤 막대는 무시합니다.

장점: 이 문제를 완전히 해결하여 다음을 수행할 수 있습니다. 완전한 XHTML 문서 유형을 유지하십시오.

단점: 페이지에 세로 스크롤 막대가 필요하지 않은 경우에도 세로 스크롤 막대가 나타납니다.

방법 2: (권장)

코드는 다음과 같습니다.

html { overflow-x: hidden; overflow-y: auto; }

원리: 가로 스크롤 숨기기, 세로 스크롤은 콘텐츠에 따라 적응됩니다

장점: 이 문제는 시각적으로 해결됩니다. 세로 스크롤 막대가 강제로 표시되지 않습니다

단점: 가로 스크롤 막대만 숨깁니다. 페이지에 가로 스크롤 막대가 꼭 필요한 경우에만

사용자가 가로 스크롤을 할 수 없기 때문에 화면 외부의 콘텐츠는 표시되지 않습니다.

방법 3

코드는 다음과 같습니다.

body { margin-right: -15px; margin-bottom: -15px; }

원리: IE가 이 정확한 값을 추가하면 스크롤이 필요하다는 착각이 들게 됩니다.

장점: 이 문제는 시각적으로 해결됩니다. 세로 스크롤은 콘텐츠에 따라 적응됩니다.

단점: "인위적으로 생성된" 15px 여백으로 인해 채워진 화면 영역을 사용할 수 없습니다

-- --------------------------------
스타일 설정

원본 HTML에서는 다음과 같이 정의할 수 있습니다. 전체 페이지의 스크롤 바

코드는 다음과 같습니다.

body{
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:#;/*- 滑道 -*/
}

하지만 xhtml에 적용하면 같은 코드가 작동하지 않습니다. 많은 좋은 친구들이 같은 문제를 겪었을 것 같아요

그렇다면 어떻게 사용할 수 있나요? xhtml 스크롤 막대 스타일을 적용하는 것은 어떻습니까? 다음 코드를 보세요

코드는 다음과 같습니다.

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로 정의된 요소에서 하나는 body이고 다른 하나는 html이라는 것입니다. 다시 테스트해 보고 html 페이지의

"body"를 "html"로 변경하여 테스트해 보고 효과가 여전히 달성되는지 확인하세요. 그렇다면 왜?

말 그대로 xhtml은 html보다 x가 하나 더 많은데, 이 x는 실제로는 xml입니다. 왜 xml을 추가해야 할까요? 사실 가장 근본적인 이유는 html을 좀 더 구조화하고 표준화하기 위한 것입니다(html은 정말 형편없기 때문이죠).

우리가 html에서 정의한 것은 body입니다. html은 표준이 아니기 때문에 작동하지만 xhtml에서는 작동하지 않습니다.

그림을 보면 body 태그 자체가 루트 요소가 아니라는 것이 분명합니다. 오직 html만이 루트 요소이고, 페이지의 스크롤 막대도 루트 요소에 속합니다. 따라서 우리가 정의한 것은 자식 요소이기 때문에 body에 대한 정의가 효과가 없는 이유입니다. 좋아요, 우리는 원칙을 알고 있습니다. 정의 "body" 또는 "xhtml"을 "*"로 바꾸면

코드는 다음과 같습니다.

*{ 
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:#;/*- 滑道 -*/
}

는 html과 xhtml 모두에 전달됩니다. 왜냐하면 *는 페이지의 모든 정의 물론 태그에는 "html" 태그도 포함됩니다.

(ps: 사실 html과 xhtml의 차이는 XHTML 1.0 전환 문서 유형의 존재 유무의 차이만큼 크지 않습니다. 하지만 페이지에서 XHTML 1.0 전환 문서 유형을 제거하면 페이지는 그렇지 않습니다. 기본 표시 모드는 html4.01이지만, 이 페이지의 표준은 html이지만 동일한 페이지에서 본문을 정의하면 아무런 효과가 없습니다. 4.01)

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

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