CSS로 스크롤 막대를 숨기는 방법
- 不言원래의
- 2018-06-09 15:33:351450검색
이 기사에서는 주로 세 가지 방법을 사용하여 CSS에서 스크롤 막대를 숨기는 방법을 공유합니다. 물론 여기서는 실제 상황에 따라 두 번째 방법을 권장합니다. 이 글에 관심 있는 친구들은 함께 배워보세요
xhtml에서 스크롤 막대 숨기기
IE6에서 프레임된 xhtml 페이지를 탐색할 때 기본적으로 가로 및 세로 스크롤 막대가 함께 나타납니다. 이는 Firefox에서 IE6의 버그입니다. 그 이유는 XHTML 1.0 전환 문서 유형의 해석 결함 때문입니다. 이 버그에 대한 해결책은 일반적으로 3가지입니다.
방법 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은 정말 형편없기 때문이죠).
body를 html로 정의하면 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)
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
위 내용은 CSS로 스크롤 막대를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!