HTML_HTML/Xhtml_Web 페이지 제작 시 스크롤바/스크롤바 제거 문제에 대해

1. xhtml 아래 스크롤 막대의 색상 문제

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

그러나 동일한 코드로 인해 우리 애플리케이션은 xhtml에서 작동하지 않을 것입니다. 많은 좋은 친구들이 동일한 문제를 겪었을 것입니다.

그럼 xhtml에서 스크롤바 스타일을 어떻게 적용하나요? 다음 코드를 보세요.


이 코드와 이전 단락의 유일한 차이점은 CSS로 정의된 요소에서 하나는 body이고 다른 하나는 body라는 것입니다. HTML입니다. 다시 테스트하고 html 페이지의 "본문"을 "html"로 변경하여 테스트하고 효과가 여전히 달성될 수 있는지 확인하겠습니다. 그렇다면 왜?

아래 그림을 보시죠.

HTML의 가장 기본적인 DOM 트리 구조입니다.

html과 xhtml의 정의를 살펴보겠습니다.

HTML(Hyper Text Markup Language, HyperText Markup Language)은 인터넷에서 널리 사용되는 HTML이 텍스트를 설명하는 방식입니다. 렌더링되는 방식과 하이퍼링크가 다른 페이지에 연결되는 방식을 설명합니다.

XHTML(Extensible Hypertext Markup Language, Extensible Hypertext Markup Language)은 HTML과 표현 방식은 비슷하지만 구문이 더 엄격한 마크업 언어입니다. 상속 관계 측면에서 볼 때 HTML은 SGML 기반의 응용 프로그램으로 매우 유연하며, XHTML은 SGML의 하위 집합인 XML을 기반으로 합니다. XHTML 1.0은 2000년 1월 26일에 W3C 권장 사항이 되었습니다.

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

다시 돌아가서 위의 구조 트리를 살펴보겠습니다. html에서 정의한 것은 본문입니다. html은 표준이 아니기 때문에 이것이 적용될 수 있지만 xhtml에서는 작동하지 않습니다. 분명히, body 태그 자체는 루트 요소가 아니며, html만이 루트 요소이고, 페이지의 스크롤 막대도 루트 요소에 속하므로 이것이 body에 대한 정의가 아무런 효과가 없는 이유입니다. 우리가 정의하는 것은 하위 요소일 뿐입니다. 자, 우리는 원칙을 알고 있습니다. "body" 또는 "xhtml"의 정의를 "*"로 변경하면 실험을 해보겠습니다.


html과 xhtml을 모두 전달합니다. 왜냐하면 *는 "html" 태그도 포함하는 페이지의 모든 태그를 정의하기 때문입니다.

(ps: 사실 html과 xhtml의 차이는 XHTML 1.0 전환 문서 유형이 있는지 여부의 차이만큼 크지 않지만, 페이지에서 XHTML 1.0 전환 문서 유형을 제거하면 다음과 같은 결과가 발생합니다. 페이지에는 doctype이 없으며 기본 표시 방법은 html4.01이지만 XHTML 1.0 전환 doctype을 HTML 4.01 doctype으로 변경해야 합니다. 표준에서는 본문을 정의하더라도 아무런 효과가 없습니다. 이 페이지는 html 4.01)

2 , xhtml 아래의 프레임 페이지에서 가로 스크롤 막대 문제

IE6을 사용하여 프레임이 있는 xhtml 페이지를 탐색할 때 가로 및 세로 스크롤 막대가 나타납니다. 이는 기본적으로 함께 사용됩니다. 이는 IE6의 버그이며 Firefox에도 있습니다. 일반적으로 그 이유는 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 여백은 '인위적으로 생성'되기 때문에 채워진 화면 영역을 사용할 수 없습니다.



가로 스크롤 막대 제거:
:


가로 스크롤 막대를 숨기고 세로 스크롤 막대 표시:


모두 숨기기


또는


스크롤 막대의 속성 코드는 다음과 같습니다.
overflow-y: 표시 | 자동 | 스크롤
visible: 내용을 자르거나 스크롤 막대를 추가하지 않습니다.
auto: 콘텐츠를 자르고 필요할 때 스크롤 막대를 추가합니다.
hidden: 개체의 높이를 초과하는 콘텐츠를 표시하지 않습니다. 이 속성은 여기에 소개되지 않습니다. 원하는 경우 직접 시도해 볼 수 있습니다.
스크롤: 항상 세로 스크롤바 표시

먼저 스크롤바 제거 방법에 대해 설명하겠습니다.
바이두 스타일 템플릿을 사용하는 경우 스크롤바는 하나만 있을 수 있습니다. 전체 공간의 오른쪽에 있는 가장 큰 브라우저 창 스크롤 막대, 즉 제가 아름답게 꾸민 스크롤 막대입니다. 이제 이 스크롤 막대를 제거할 수 있지만 탐색 방법에는 영향을 미치지 않습니다.
본문에 Overflow-y 추가
{}:
visible 완료되었으므로 스크롤 막대가 표시되지 않습니다. 어떻게 이렇게 끌어내릴 수 있느냐고 물으실 수도 있습니다. 하하, 브라우징에는 영향이 없다고 했으니 당연히
마우스 휠을 사용하는 방법도 있습니다. 아래에. 일반적으로 웹을 탐색할 때 마우스로 스크롤 막대를 직접 드래그하는 것보다 스크롤 휠을 사용하여 웹 페이지를 아래로 스크롤하는 횟수가 더 많다고 생각합니다
그렇죠? 참고로, 마우스에 스크롤바도 없고 스크롤 휠도 없는 친구를 만난다면 어떻게 웹을 탐색해야 할까요? 하하, 키보드의 화살표 키 위에 있는 PageUp 및 PageDown
을 사용하여 페이지를 위아래로 넘길 수 있습니다. 또한 Space를 사용하여 웹 페이지를 아래로 내리고 Shift Space를 사용하여 웹 페이지를 가져올 수도 있습니다. 상하 화살표 키를 누르면 웹 페이지 상단으로 돌아갈 수 있고, End 키를 누르면 웹 페이지 하단으로 이동할 수 있습니다. 하하. 방법? 하지만 이로 인해 항상 불편을 겪게 되므로, 자신의 공간과 선호도에 따라 이 스크롤바를 취소할지 여부를 고려하시면 됩니다.

하하, 한꺼번에 이렇게 많은 말을 하게 될 줄은 몰랐습니다

스크롤바 추가 방법에 대해 이야기해보겠습니다:
overflow-y: auto;height: 얼마나 많은 px
auto
는 스크롤바 추가 여부를 자동으로 결정하는 것입니다. 설정된 개체 내용이 높이에 설정된 높이를 초과하면 스크롤바가 자동으로 추가되며 그렇지 않으면 본문에 기본값이 표시되지 않습니다. {}는
입니다.Overflow-y: auto;height: 브라우저 높이이므로 웹페이지 콘텐츠가 브라우저 높이를 초과하면 자동으로 브라우저 오른쪽에 스크롤 막대가 나타납니다.
이를 설정해야 하는 경우
권장합니다. 최신 댓글 #m_comment{}, 기사 목록 #m_blog{} 및 콘텐츠와 높이가 고정되지 않은 기타 템플릿에 설정됩니다. 일부 친구는 이러한 템플릿의 ID를 찾을 수 없습니다(예: #m_comment div). item{ } 또는 #m_pro a{} 등을 사용하는 경우 ID를 직접 추가하여 설정할 수 있습니다.

스크롤 막대를 추가하는 또 다른 방법은 다음과 같습니다.
overflow-y: 스크롤
이 매개변수의 기능은 위에서 설명했지만 이 매개변수만 추가하면 스크롤바는 표시되지만 스크롤바는 표시되지 않으므로
높이를 추가해야 합니다. px
height 속성은 위의 방법과 비슷하지만, 객체 내용의 높이가 height에 설정된 높이를 초과하더라도 스크롤바가 항상 옆에 표시됩니다

아래에 얘기해보겠습니다. 스크롤바 미화에 관해 친구가 인터넷에서 설명을 보여줬는데 위 사진이 너무 좋은 것 같은데 너무 작아서 크기를 두 배로 키웠더니 훨씬 선명해 보이네요. . 먼저 미화에 대해 이야기해보겠습니다.


여기 그림에도 실제로 scrollbar-base-color 속성이 있습니다. attribute 위의 7가지 속성을 합한 것을 어떻게 말하나요? 즉, 이 속성의 색상을 설정한 후에는
이전 7가지 속성을 설정할 필요가 없습니다. 스크롤 막대가 자동으로 설정하지만 이 설정은 스크롤 막대 기반을 기반으로 합니다. 이 속성의 장점은 모든 사람이 다양한 장소의 색상을 연구할 필요가 없다는 점이지만 모든 색상을 하나로 혼합할 수 없다는 단점이 있습니다. .

참고: 스크롤바 기본 색상이 설정된 경우 다른 7가지 속성을 설정하지 마세요. 다른 7가지 속성이 설정된 경우 스크롤바 기본 색상을 설정하지 마세요. 그렇지 않으면 충돌이 발생할 수 있습니다. 효과가 없을 수도 있어요

마지막으로 제 미화 코드 [너무 냄새나요~]를 좋아하실까봐 미화 코드를 올렸습니다:





코드 복사스크롤바-그림자 색상: #813533;