JavaScript 및 jQuery에서 "화면 해상도" 및 "브라우저 창 크기"를 결정하는 방법. 요소 크기 및 웹 페이지 스크롤이 유용한 경우
안녕하세요! 이번 강의의 주제를 계속해서, 우리는 웹 페이지를 스크롤하고 브라우저 크기를 조작하는 문제를 살펴볼 것입니다. 브라우저 너비는 어떻게 알 수 있나요? JavaScript를 사용하여 웹페이지를 스크롤하는 방법은 무엇입니까? 이번 강의에서 이러한 질문에 대한 답을 찾을 수 있을 것이라고 생각합니다.
window.innerWidth/Height가 아님
IE8을 제외한 모든 브라우저는 window.innerWidth/innerHeight 속성을 지원할 수도 있습니다. 현재 창 크기를 저장합니다.
차이점이 뭐야? 물어. 물론 작지만 매우 중요합니다.
스크롤 막대가 있는 경우 clientWidth/Height 속성은 전체 문서에 사용할 수 있는 내부 너비/높이를 정확하게 반환하며 window.innerWidth/Height는 스크롤 막대의 존재를 무시합니다.
페이지 오른쪽이 스크롤 막대로 채워져 있으면 다음 줄에 다른 내용이 표시됩니다.
Alert(window.innerWidth); // 창의 전체 너비 경보(document.documentElement.clientWidth); // 너비 빼기 스크롤
일반적으로 우리는 창의 사용 가능한 너비(예: 스크롤 막대 제외)에만 관심이 있습니다. 따라서 documentElement.clientWidth가 자주 사용됩니다.
스크롤을 고려한 웹페이지의 너비/높이예, 이론적으로 페이지에 표시되는 부분은 documentElement.clientWidth/Height이지만 스크롤 막대를 포함한 전체 크기는 비유적으로 documentElement.scrollWidth/scrollHeight입니다.
이는 모든 일반 요소에 해당됩니다.
그러나 이러한 속성이 있는 페이지의 경우 스크롤이 있거나 없을 때 문제가 발생할 수 있습니다. 이 경우 올바르게 작동하지 않습니다. Chrome/Safari 및 Opera 브라우저에서 스크롤 막대가 없으면 이 경우 documentElement.scrollHeight의 값은 documentElement.clientHeight보다 훨씬 작을 수 있으며 이는 물론 비논리적으로 보입니다.
이 문제는 특히 documentElement에 대해 발생할 수 있습니다.
그러나 다음과 같은 여러 속성 중 최대값을 취함으로써 스크롤을 고려한 페이지 크기를 안정적으로 결정할 수 있습니다.
Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); Alert("스크롤을 포함한 높이: " + scrollVisota);
현재 스크롤 가져오기일반 요소에 현재 스크롤이 있는 경우 scrollLeft/scrollTop에서 가져올 수 있습니다.
그렇다면 페이지는 어떨까요?
요점은 대부분의 브라우저가 documentElement.scrollLeft/Top에 대한 요청을 올바르게 처리하지만 Safari/Chrome/Opera에는 document.body를 사용해야 하는 버그가 있다는 것입니다.
이 문제를 완전히 해결하려면 window.pageXOffset/pageYOffset 속성을 사용할 수 있습니다.
Alert("현재 스크롤 상단: " + window.pageYOffset); Alert("현재 왼쪽 스크롤: " + window.pageXOffset);
다음은 모두 속성입니다.
- 지원되지 않음 IE8-
- 읽기만 가능하며 변경할 수 없습니다.
IE8이 중요하지 않다면 이 속성을 사용하면 됩니다.
IE8을 고려한 크로스 브라우저 옵션은 documentElement에 대한 옵션을 제공합니다.
Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; Alert("현재 스크롤: " + scrollTop);
페이지 스크롤 변경: scrollTo, scrollBy, scrollIntoViewJavaScript를 사용하여 페이지를 스크롤하려면 모든 요소가 완전히 로드되어야 합니다.
일반 요소에서는 원칙적으로 scrollTop/scrollLeft가 변경될 수 있으며 요소는 스크롤됩니다.
아무도 당신이 페이지에서 같은 일을 하는 것을 막지 않습니다. Chrome/Safari/Opera를 제외한 모든 브라우저에서는 document.documentElement.scrollTop을 설정하기만 하면 스크롤이 가능하며, 이러한 브라우저에서는 document.body.scrollTop을 사용해야 합니다. 그리고 모든 것이 잘 작동할 것입니다.
그러나 또 다른 보편적인 솔루션이 있습니다. 특수 페이지 스크롤 방법 window.scrollBy(x,y) 및 window.scrollTo(pageX,pageY)입니다.
- scrollBy(x,y) 메소드는 현재 좌표를 기준으로 페이지를 스크롤합니다.
- scrollTo(pageX,pageY) 메서드는 전체 문서를 기준으로 지정된 좌표로 페이지를 스크롤합니다. 이는 scrollLeft/scrollTop 속성을 설정하는 것과 동일합니다. 문서의 시작 부분으로 스크롤하려면 좌표(0,0)만 지정하면 됩니다.
elem.scrollIntoView(top) 메소드는 요소에서 호출되어야 하며 top이 true인 경우 요소가 맨 위에 있고 top이 false인 경우 맨 아래에 있도록 페이지를 스크롤해야 합니다. 또한 이 최상위 매개변수를 지정하지 않으면 true가 됩니다.
스크롤 방지문서를 "스크롤할 수 없도록" 만들어야 하는 상황이 있습니다. 예를 들어 방문자가 대화 상자를 스크롤할 수 있지만 문서 자체는 스크롤할 수 없도록 문서 위에 큰 대화 상자를 표시합니다.
페이지 스크롤을 방지하려면 document.body.style.overflow = “hidden” 속성을 설정하면 됩니다.
document.body 대신 스크롤을 비활성화해야 하는 요소가 있을 수 있습니다.
하지만 이 방법의 단점은 스크롤 막대 자체가 사라진다는 점입니다. 특정 너비를 차지했다면 이제 이 너비는 비워지고 페이지 내용이 확장되며 텍스트가 "점프"되어 여유 공간을 모두 차지하게 됩니다.
결과- 창에서 보이는 부분의 크기를 얻으려면 document.documentElement.clientWidth/Height 속성을 사용하십시오.
- 스크롤을 고려한 페이지 크기를 얻으려면 다음을 사용합니다. var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document. documentElement.clientHeight);
이것은 무엇을 위한 것입니까? 예를 들어, 우리는 1600 x 1200의 해상도에서만 모든 아름다움을 보여주는 아름다운 웹 사이트 레이아웃을 가지고 있습니다. 예를 들어, 매우 크고 아름다운 헤더가 있습니다. 사람이 1024 x 768의 해상도로 사이트를 방문하면 어떻게 되나요? 예, 모자만 보입니다. 안좋다? 아마도. 그렇다면 브라우저/화면의 높이로 인해 헤더가 잘리고 메뉴와 사이트의 나머지 부분이 사라지는 그런 작업을 수행하는 것은 어떨까요? 와, 꼭 필요한 것뿐입니다.
실제로 제가 실제로 접한 사례 중 하나를 설명했습니다(그림 참조). 자바스크립트를 통해 간단하게 문제를 해결했습니다. 아니면 jQuery를 통해 기억이 나지 않습니다. 여기서는 두 가지 방법을 모두 설명하겠습니다.
우선, "화면 해상도"와 "브라우저 창 크기"의 정의를 구별할 필요가 있습니다(일부 기사에는 사건이 있었기 때문에 일부 방법을 비판하고 다른 방법을 제안했지만 한 경우에는 브라우저 해상도를 측정했습니다. 기타 - 모니터 해상도).
자신에게 더 중요한 것이 무엇인지 처음부터 결정해야 합니다. 헤더가 있는 예의 경우 화면(모니터) 해상도를 기준으로 했습니다. 결국 사이트는 아름답습니다. 브라우저 창을 수동으로 줄인 다음 이를 볼 때 브라우저를 전체 화면으로 확장하도록 하세요. 사이트(그들은 사업이 없습니다. 아시다시피 - 편집자 주). 하지만 예를 들어 jQuery 라이트박스 갤러리의 확장된 이미지를 조정하기 위해 브라우저의 너비와 높이를 사용했습니다.
그리고 선택한 후 사이트 헤더에 코드를 작성합니다. 먼저 화면 해상도에 초점을 맞춘 예입니다.
3-6행은 순전히 javascript이고, 7-11행은 jQuery의 예입니다. 너비와 높이를 결정하기 위해 javascript 메소드 screen.width 및 screen.height가 사용됩니다. 행이 수행하는 작업은 명확합니다. 첫 번째 스크립트는 추가 CSS 파일에 대한 경로를 지정하고 두 번째 스크립트는 식별자 total을 사용하여 블록에 대한 "Background-position" CSS 속성을 설정합니다.
두 번째 예를 살펴보겠습니다. 여기서는 브라우저 해상도에 중점을 둡니다. 모든 것이 동일하고 방법이 변경되었습니다.
따라서 두 가지 예를 통해 무엇을 위해 무엇을 사용할지에 대한 간략한 개요는 다음과 같습니다.
jQuery를 사용하는 경우 옵션 5가 3보다 선호되고 6이 4보다 선호됩니다. 이는 단순히 더 짧습니다. 글쎄요, 맛과 색깔에 따라 다르죠.
jQuery의 화면 높이와 너비에 대한 특정 항목은 솔직히 말해서 모르겠습니다. 이론적으로는 5~6줄 정도의 구조가 있어야 하는데 실제로는 본 적이 없어서 존재하지 않는 것 같아요. 그리고 꼭 필요한 것은 아닙니다. screen.width는 충분히 짧은 구성이므로 충분합니다.
예, $(document).width()도 있습니다 - HTML 문서의 너비를 결정합니다. 실제로 사용하는 것은 다소 의심스럽습니다. 누가 알겠습니까? 공유하면 기뻐할 것입니다.
오늘은 그게 다야! 주말까지 버티고 단체로 바베큐하러 갑시다! (편집자 주와 같은 문제로 아프지 않는 한). 행운을 빌어요!
웹사이트용 인터페이스를 개발할 때 JavaScript를 사용해야 하는 경우가 많습니다. 물론 이것은 나쁘지만 어떤 상황에서는 CSS로 모든 것을 완전히 구현하는 것이 불가능합니다.
제가 갖고 있는 가장 일반적인 요구 사항은 추가 조작을 위해 브라우저 창의 너비나 높이를 결정하는 것입니다. 컷 아래에는 이 주제에 대한 모든 정보가 있습니다.
이것이 어디에 유용할 수 있나요?모든 사람을 대변하지는 않겠지만 모든 것이 순수 JS로 작성되는 모든 종류의 갤러리, 슬라이더 등을 Textpattern과 통합하는 데 이 기능이 유용합니다. JS와 엄격하게 관련된 일은 드물지만 발생하기 때문에 이 메모가 나온 것입니다.
JS 또는 jQuery의 두 가지 방법으로 정의할 수 있습니다.
순수 JS를 사용하여 너비 또는 높이 결정거의 모든 최신 브라우저에는 JavaScript 엔진이 있기 때문에 이것이 가장 선호되는 방법입니다. 모바일 브라우저조차도 JS로 작업하는 방법을 배웠습니다.
물론 사용자가 브라우저에서 JS 처리를 비활성화할 가능성이 있지만 거의 모든 사이트가 JS에서 실행되는 일종의 솔루션을 사용하기 때문에 그러한 "이상한 사람"은 많지 않은 것 같습니다.
JS에서는 화면 크기를 결정하려면 다음 기능을 사용해야 합니다.
Screen.width //화면 너비 screen.height //화면 높이
무의미한 사용 예는 다음과 같습니다.
경고(화면.너비+"x"+화면.높이);
이를 사용하여 페이지의 일부 요소를 배치하는 경우 가장 좋은 솔루션은 화면 크기보다는 브라우저 창 크기를 사용하는 것입니다. JS에서는 다음과 같이 수행됩니다.
Document.body.clientWidth //브라우저 너비 document.body.clientHeight //브라우저 높이
따라서 다음은 의미 없는 사용 예입니다.
경고(document.body.clientWidth+"x"+document.body.clientHeight);
jQuery를 사용한 브라우저 크기 조정개인적으로 저는 아래에 설명된 방법을 사용합니다. 이 방법은 이전에 사이트에 jQuery 라이브러리를 설치한 경우에만 작동합니다. 내가 만들어야 하는 모든 사이트에서 이 라이브러리는 사실상의 표준입니다.
작업에 jQuery를 사용하려면 다음 코드를 사용해야 합니다.
$(창).너비(); //브라우저 너비 $(window).height(); //브라우저 높이
그리고 결국 JS와 jQuery 없이도 전체적으로 또는 부분적으로 작업이 가능하다면 이것이 바로 여러분이 해야 할 일이라고 말하고 싶습니다.
소셜 미디어에 공유 네트워크
이 단원에서는 브라우저 창의 작업 영역 크기(innerWidth 및 innerHeight), 창 자체의 크기(outerWidth 및 externalHeight)를 얻을 수 있는 창 개체의 속성을 살펴보겠습니다. 사용자 화면의 왼쪽 상단 모서리(screenLeft 및 screenTop)를 기준으로 한 위치와 스크롤 위치(pageXOffset 및 pageYOffset)입니다.
innerWidth 및 innerHeight 속성브라우저 창의 보이는 작업 영역 크기를 얻도록 설계되었습니다. 저것들. innerWidth 및 innerHeight 속성은 HTML 문서가 표시되는 영역의 너비와 높이를 가져오기 위한 것입니다. 이러한 속성은 읽기 전용이며 픽셀 값을 반환합니다.
예를 들어 브라우저 창에 표시되는 작업 영역의 높이와 너비를 가져옵니다.
표시되는 보기 영역의 너비(widthContenArea):
표시되는 보기 영역의 너비(heightContenArea):
// 표시되는 뷰포트의 너비(Internet Explorer 8을 제외한 모든 브라우저의 경우) var widthContenArea = window.innerWidth; // 표시되는 뷰포트의 높이(Internet Explorer 8을 제외한 모든 브라우저의 경우) var heightContenArea = window.innerHeight; // 표시되는 뷰포트의 너비(Internet Explorer 8의 경우) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // 표시되는 뷰포트의 높이(Internet Explorer 8의 경우) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // 표시되는 뷰포트의 너비(모든 브라우저에 대해) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // 보이는 뷰포트의 높이(모든 브라우저에 대해) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea; externalWidth 및 externalHeight 속성이는 전체 브라우저 창의 크기를 얻도록 설계되었습니다. 도구 모음, 스크롤 막대, 상태 표시줄, 창 테두리 등을 포함합니다. OuterWidth 및 OuterHeight 속성은 읽기 전용이며 각각 창의 너비와 높이를 픽셀 단위로 반환합니다.
예를 들어, 브라우저 창의 높이와 너비를 가져옵니다.
브라우저 창 너비(widthWindow):
브라우저 창 높이(heighWindow):
// 브라우저 창 너비 var widthWindow = window.outerWidth; // 브라우저 창 높이 var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow; screenLeft(screenX) 및 screenTop(screenY) 속성이는 사용자 화면의 왼쪽 상단 모서리를 기준으로 브라우저 창 또는 문서의 왼쪽 상단 모서리 좌표를 얻도록 설계되었습니다.
이 경우 screenLeft 및 screenTop 속성은 Internet Explorer에서 작동하고 screenX 및 screenY 속성은 Mozilia Firefox에서 작동합니다. Chrome, Safari 및 기타 유사한 브라우저에서는 screenLeft 및 screenTop 속성과 screenX 및 screenY 속성을 모두 사용할 수 있습니다.
이러한 속성을 사용할 때 일부 브라우저는 문서의 왼쪽 위 모서리 좌표를 반환할 수 있고 일부 브라우저는 창의 왼쪽 위 모서리 좌표를 반환할 수 있다는 사실을 고려해야 합니다. screenleft(screenX) 및 screenTop(screenY) 속성은 읽기 전용이며 각각 화면 왼쪽 모서리를 기준으로 한 가로 및 세로 거리를 픽셀 단위로 반환합니다.
예를 들어 화면 왼쪽 상단을 기준으로 현재 브라우저 창(문서) 왼쪽 모서리의 x 및 y 좌표를 메시지 형식으로 표시해 보겠습니다.
function windowXY() ( // screenleft 및 screenTop 속성을 사용하여 창(문서) 위치의 좌표를 얻습니다. var winX = window.screenLeft; var winY = window.screenTop; // screenX 및 screenY 속성을 사용하여 다음을 얻습니다. 창(문서) 위치의 좌표 winX = window.screenX; winY = window.screenY; // 모든 브라우저에서 창(문서)의 좌표를 가져옵니다. winX = window.screenX: window.screenLeft; : window.screenTop ; window.alert("사용자 화면을 기준으로 한 창 좌표: X = " + winX + ", Y = " + winY + ".")
이는 창의 왼쪽 위 모서리를 기준으로 문서가 가로(pageXOffset) 또는 세로(pageYOffset) 방향으로 스크롤된 픽셀 수를 가져오도록 설계되었습니다. scrollX 및 scrollY 속성은 각각 pageXOffset 및 pageYOffset 속성과 동일합니다. 이러한 속성은 읽기 전용입니다.
예를 들어, 문서가 가로(pageXOffset) 및 세로(pageYOffset) 방향으로 스크롤된 픽셀 수를 메시지에 표시합니다.
function scrollContent() ( //현재 문서를 오른쪽으로 200px 스크롤하고 window.scrollBy(200,200); //pageXOffset 및 pageYOffset 속성을 사용하여 값을 가져옵니다. var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Internet Explorer의 경우 문서가 가로 또는 세로 방향으로 스크롤된 값을 가져옵니다. winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //모든 브라우저의 경우: winOffsetX = window.XOffset || winOffsetY = window.pageYOffset || document.documentElement.scrollTop; 경고("문서가 수평 및 수직으로 스크롤된 픽셀 수: X = " + winOffsetX + ", Y = " + winOffsetY + ".") 스크롤바의 위치
