>웹 프론트엔드 >JS 튜토리얼 >js_javascript 스킬에서 고정 레이어를 배치하는 방법

js_javascript 스킬에서 고정 레이어를 배치하는 방법

WBOY
WBOY원래의
2016-05-16 16:44:311177검색

대상 레이어의 좌표를 보다 유연하게 설정하려면 일부 HTML 개체의 좌표를 가져와야 합니다. 여기에서는 document.body.scrollTop과 같은 속성을 사용할 수 있지만 이러한 속성은 표준 xhtml 웹 페이지에 있거나 더 간단하게 <를 사용합니다. ;! DOCTYPE...> 태그에서 얻은 값은 0입니다. 이 태그를 사용하지 않으면 모든 것이 잘 됩니다. 그러면 xhtml에서 본문의 좌표를 얻는 방법은 무엇입니까? 물론 document.documentElement를 사용하여 document.body를 대체하는 방법이 있습니다. 예를 들어 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var top=document.documentElement.scrollTop ||document.body.scrollTop;

|| if 조건문에서 사용할 수 있을 뿐만 아니라 변수 할당에도 사용할 수 있습니다. 위의 예는 다음 형식으로 작성할 수 있습니다.
코드 복사 코드는 다음과 같습니다.

var top=document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop;
이렇게 쓰면 호환성이 좋아질 수 있습니다. 또 한 가지 주의할 점은 document.documentElement.scrollTop의 값을 선언하지 않으면 대신 0이 표시된다는 점입니다.



js_javascript 스킬에서 고정 레이어를 배치하는 방법설명: 현재 페이지에서 스크롤 막대 좌표의 수직 좌표 위치를 얻으려면:
document.body 대신
document.documentElement.scrollTop을 사용하세요. .scrollTop ;
document.documentElement는 html 태그를 가져오고,
document.body는 body 태그를 가져옵니다.
표준 w3c에서 document.body.scrollTop은 항상 0이므로 document.documentElement.scrollTop을 사용해야 합니다. . 대신
페이지를 기준으로 마우스의 절대 위치를 지정하려면 대부분의 검색 엔진에서
event.clientX document.body.scrollLeft, event.clientY를 사용하도록 요청합니다. document.body.scrollTop;
IE5.5는 더 이상 document.body.scrollX 객체를 지원하지 않기 때문에 마우스가 상상에서 벗어난다면 전혀 놀라운 일이 아닙니다.
그래서 문장


if (document.body && document .body.scrollTop &&document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;
}
if (document.documentElement && document .documentElement.scrollTop&& document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft; 다음은 일부 매개변수의 사용법을 설명합니다.
웹 페이지의 가시성 영역 너비: document.body.clientWidth;
웹 페이지의 표시 영역 높이: document.body.clientHeight
웹의 표시 영역 너비; 페이지: document.body.offsetWidth; (가장자리 너비 포함)
표시되는 웹 페이지 영역 높이: document.body.offsetHeight; (가장자리 너비 포함); 페이지 본문: document.body.scrollWidth;
웹 페이지 본문의 전체 텍스트 높이: document.body.scrollHeight
웹 페이지가 스크롤됩니다. 높음: document.body.scrollTop
웹 왼쪽; 스크롤되는 페이지: document.body.scrollLeft;
웹페이지 본문 상단: windows.screenTop
웹페이지 본문 왼쪽: windows.screenLeft
화면 해상도 높이: windows .screen.height;
화면 해상도 너비: windows.screen.widht;
사용 가능한 화면 작업 영역 높이: windows.screen.availHeight;
사용 가능한 화면 작업 영역 너비: windows.screen.availWidth; 개체의 스크롤 높이를 가져옵니다.
개체의 왼쪽 가장자리와 창에 현재 표시되는 콘텐츠의 가장 왼쪽 끝 사이의 거리를 설정하거나 가져옵니다.
개체 사이의 거리를 설정하거나 가져옵니다. 개체의 상단 및 창에 표시되는 콘텐츠의 상단: scrollTop;
개체의 스크롤 너비를 가져옵니다. scrollWidth
레이아웃을 기준으로 하거나 상위 좌표로 지정된 개체를 가져옵니다. 상위 좌표의 높이: offsetHeight;
offsetParent 속성으로 지정된 상위 좌표 또는 레이아웃을 기준으로 계산된 개체의 왼쪽 위치를 가져옵니다.
레이아웃을 기준으로 계산된 개체의 위쪽 위치를 가져옵니다. 또는 offsetTop 속성으로 지정된 상위 좌표 위치: offsetTop;
event.clientX: 문서를 기준으로 한 가로 좌표
event.clientY: 문서를 기준으로 한 세로 좌표
event.offsetX: 가로 좌표
event .offsetY: 컨테이너를 기준으로 한 수직 좌표
document.documentElement.scrollTop: 스크롤의 수직 높이 설정
event.clientX document.documentElement.scrollTop: 수직 스크롤 양 문서의 수평 위치를 기준으로 합니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.