HTML의 스크롤 막대 정보/스크롤 막대 제거

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

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

body{

scrollbar -3dlight-color:#D4D0C8; /*- 왼쪽 외부-*/

scrollbar-highlight-color:#fff; /*- 왼쪽에서 두 번째-*/

스크롤바 -face- 색상:#E4E4E4; /*-face-*/

스크롤바-화살표-색상:#666; /*-arrow-*/

스크롤바-그림자-색상:# 808080; / *- 오른쪽에서 두 번째-*/

scrollbar-darkshadow-color:#D7DCE0 /*- 오른쪽에서 첫 번째-*/

scrollbar-base-color:# D7DCE0; /*- 기본 색상- */

scrollbar-track-color:#;/*- Slider-*/

}

그러나 동일한 코드는 xhtml에서 사용되었습니다. 많은 좋은 친구들이 같은 문제에 직면했다고 생각합니다.

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

html{

scrollbar-3dlight-color:#D4D0C8; /*- 가장 바깥쪽 왼쪽-*/

scrollbar-highlight-color:# fff ; /*- 왼쪽에서 두 번째-*/

scrollbar-face-color:#E4E4E4 /*- Face-*/

scrollbar-arrow-color:#666; - 화살표 -*/

scrollbar-shadow-color:#808080; /*- 오른쪽에서 두 번째-*/

scrollbar-darkshadow-color:#D7DCE0 /*- 첫 번째 오른쪽-*/

scrollbar-base-color:#D7DCE0; /*- 기본 색상-*/

scrollbar-track-color:#;/*- 슬라이드-*/

}

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

아래 그림을 보시죠.



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

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



HTML(Hyper Text Markup Language, HyperText 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"의 정의를 "*"로 바꾸면 실험을 해보겠습니다.

*{

scrollbar-3dlight-color: #D4D0C8; /*- 왼쪽 외부-*/

scrollbar-highlight-color:#fff; /*- 왼쪽에서 두 번째-*/

scrollbar-face-color:#E4E4E4; /*- Face-*/

scrollbar-arrow-color:#666; /*- Arrow-*/

scrollbar-shadow-color:#808080 /*- 오른쪽에서 두 번째; -*/

scrollbar-darkshadow-color:#D7DCE0; /*- 오른쪽 하나-*/

scrollbar-base-color:#D7DCE0; /*- 기본 색상-*/

scrollbar-track-color:#;/*- Slider-*/

}

는 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 | 숨겨진 | 스크롤

visible: 내용을 자르거나 스크롤 막대를 추가하지 않습니다.

auto: 콘텐츠 잘라내기 및 필요한 경우 스크롤 막대 추가

hidden: 개체 높이를 초과하는 콘텐츠를 표시하지 않습니다. 원할 경우 이 속성은 여기에 도입되지 않습니다. 직접 해 보세요

스크롤: 항상 세로 스크롤바 표시

먼저 스크롤바 제거 방법에 대해 말씀드리겠습니다.

바이두 스타일을 사용한다면 템플릿에는 스크롤 막대가 하나만 있을 수 있습니다. 즉, 전체 공간의 오른쪽에 있는 가장 큰 브라우저 창 스크롤 막대는 제가 아름답게 만든 스크롤 막대입니다. 이제 이 스크롤 막대를 제거할 수 있지만 탐색 방법에는 영향을 주지 않습니다:

본문에서
{}:

visible, 그러면 스크롤 막대가 표시되지 않습니다. 어떻게 이렇게 끌어내릴 수 있느냐고 물으실 수도 있습니다. ㅎㅎ 브라우징에는 영향이 없다고 했으니 당연히

마우스 휠을 이용하는 방법도 있습니다. 비록 스크롤바는 사라졌지만 마우스 휠로는 여전히 웹을 스크롤할 수 있습니다. 페이지 위아래로. 일반적으로 웹을 탐색할 때 마우스로 스크롤바를 직접 드래그하는 것보다 스크롤 휠을 사용하여 웹페이지를 아래로 스크롤하는 횟수가 더 많다고 생각합니다

그렇죠? 참고로 스크롤바도 없고 마우스에 스크롤 휠도 없는 친구를 만난다면 어떻게 웹을 탐색해야 할까요? 하하, 키보드의 화살표 키 위에 있는 PageUp 및 PageDown

을 사용하여 페이지를 위아래로 넘길 수도 있고, Shift+Space를 사용하여 웹 페이지를 가져올 수도 있습니다. 위쪽 및 아래쪽 화살표 키를 사용하는 것입니다. 당기려면 홈 키를 눌러 웹 페이지 상단으로 돌아가고

끝 키를 눌러 웹 페이지 하단으로 이동할 수도 있습니다. 하하, 방법이 많나요? 하지만 이로 인해 항상 불편을 겪게 되므로, 자신의 공간과 선호도에 따라 이 스크롤바를 취소할지 여부를 고려하시면 됩니다.

하하, 한꺼번에 이렇게 많은 말을 하게 될 줄은 몰랐네요

스크롤바 추가하는 방법에 대해 이야기해보겠습니다:

overflow-y : auto;height: How 많은 px

auto

는 설정된 객체 내용이 높이에 설정된 높이를 초과하면 자동으로 스크롤 막대를 추가할지 여부를 결정합니다. body{}의 기본값은

overflow-y: auto;height: 브라우저 높이이므로 웹페이지 콘텐츠가 브라우저 높이를 초과하면 스크롤 막대가 자동으로 오른쪽에 나타납니다.



이를 설정해야 하는 경우 최신 댓글 #m_comment{}, 기사 목록 #m_blog{} 등과 같이 가변 콘텐츠와 높이가 있는 템플릿에서 설정하는 것이 좋습니다. . 몇몇 친구들이 찾았습니다. 이 모델

버전의 ID가 없으면 #m_comment p.item{} 또는 #m_pro a{} 등과 같은 ID만 있을 수 있습니다. 그런 다음 추가할 수 있습니다. ID가 없으면 설정할 수 있습니다.

스크롤 막대를 추가하는 또 다른 방법은 다음과 같습니다.

overflow-y :scroll

이 매개변수의 기능 위에서 설명했지만 이 파라미터만 추가하면 스크롤바는 표시되지만 스크롤바는 표시되지 않으므로

높이: 몇 px
height 속성은 위의 방법과 비슷하지만 근본적인 차이점이 있는데, 객체 내용의 높이가 높이에 의해 설정된 높이를 초과하더라도 스크롤바는 항상 옆에 표시됩니다

스크롤 막대의 미화에 대해 이야기해 보겠습니다. 친구가 온라인에서 이것을 보여주었습니다. 참고로, 위의 사진은 아주 좋은 것 같은데 크기가 너무 작아서 크기를 두 배로 늘렸더니 훨씬 더 선명해 보입니다. 미화의 다양한 속성:

SCROLLBAR-FACE-COLOR: 색상 코드

SCROLLBAR-HIGHLIGHT-COLOR: 색상 코드;SCROLLBAR-SHADOW-COLOR: 색상 코드;

SCROLLBAR-3DLIGHT-COLOR: 색상 코드;

SCROLLBAR-ARROW-COLOR: 색상 코드; : 색상 코드;

SCROLLBAR-DARKSHADOW-COLOR: 색상 코드

너무 많은 속성을 보면 고개가 끄덕여지시나요? 하하, 걱정하지 마세요. 제가 방금 언급한 두 배로 확대된 그림을 보시면 기분이 훨씬 나아질 것입니다:

이 그림

에도 스크롤바 기반이 있습니다- 색의 속성, 사실 이 속성은 위의 7가지 속성을 합한 것을 어떻게 말하나요? 즉, 이 속성의 색상을 설정한 후에

이전 7가지 속성을 설정할 필요가 없습니다. 스크롤 막대가 자동으로 설정하지만 이 설정은 사용자가 선택한 스크롤 막대를 기반으로 합니다. set. -base-color의 색상은 자동으로 설정됩니다

. 이 속성의 장점은 모든 사람이 여러 장소의 색상을 연구할 필요가 없다는 점이지만, 모든 것을 혼합할 수 없다는 단점이 있습니다. 색상을 하나로. .

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

마지막으로 모두가 내 미화 코드 [너무 냄새나요~]를 좋아할 것이라는 점을 고려하여 미화 코드를 게시했습니다:

SCROLLBAR -FACE-COLOR: #CCFFFF;

스크롤바-하이라이트-색상: 흰색

스크롤바-섀도우-색상:

스크롤바-3DLIGHT-색상: # 813533;
스크롤바-화살표-색상:

스크롤바-트랙-색상: 흰색 🎜>




-->

위 내용은 HTML의 스크롤 막대 정보/스크롤 막대 제거의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!