Како да се одреди висината на страницата js. Како да се одреди „резолуцијата на екранот“ и „големината на прозорецот на прелистувачот“ во JavaScript и jQuery. Промена на лизгање на страницата: scrollTo, scrollBy, scrollIntoView

Кога развивате интерфејси за веб-локации, честопати треба да користите JavaScript. Се разбира, ова е лошо, но во некои ситуации едноставно е невозможно да се имплементира сè целосно во CSS.

Најчеста потреба што ја имам е да ја одредам ширината или висината на прозорецот на прелистувачот за понатамошна манипулација. Под резот се сите информации на оваа тема.

Каде може ова да биде корисно?

Нема да зборувам за секого, но ова ми е добро при интегрирање со Textpattern сите видови галерии, лизгачи итн., каде што сè е напишано во чист JS. Работите кои се строго врзани за ЈС се ретки, но се случуваат, поради што се појави оваа белешка.

Можете да го дефинирате на 2 начини: JS или jQuery.

Одредување на ширина или висина користејќи чист JS

Ова е најпреферираниот метод, бидејќи скоро секој модерен прелистувач има JavaScript мотор. Дури и мобилните прелистувачи научија да работат со JS.

Се разбира, постои можност самиот корисник да ја оневозможи обработката на JS во прелистувачот, но ми се чини дека нема многу такви „чудни луѓе“, бидејќи скоро секоја страница користи некакво решение што работи на JS.

Во JS, за да ги одредите големините на екранот, треба да ги користите функциите:

Ширина на екранот //Ширина на екранот. висина //Висина на екранот

Еве бесмислен пример за употреба:

аларм (екран. ширина + "x" + екран. висина);

Ако го користите ова за да поставите некои елементи на страницата, тогаш најдобро решение би било да ги користите димензиите на прозорецот на прелистувачот наместо големини на екранот. Во JS ова се прави вака:

Document.body.clientWidth //Ширина на прелистувачот document.body.clientHeight //Висина на прелистувачот

Според тоа, еве бесмислен пример за употреба:

alert(document.body.clientWidth+"x"+document.body.clientHeight);

Димензионирање на прелистувачот со jQuery

Лично, јас го користам методот опишан подолу. Овој метод работи само ако претходно сте ја инсталирале библиотеката jQuery на вашата страница. На сите страници што треба да ги креирам, оваа библиотека е де факто стандард.

За да користиме jQuery за нашата задача, треба да го користиме кодот:

$(прозорец).width(); //Ширина на прелистувачот $(прозорец).height(); //Висина на прелистувачот

И на крајот, би сакал да кажам дека ако е можно да се направи без JS и jQuery воопшто или делумно, тогаш тоа е токму она што треба да го направите.

Споделете на социјалните мрежи мрежи

За што е ова? На пример, имаме прекрасен распоред на веб-локација, кој ја покажува целата нејзина убавина само со резолуција од, да речеме, 1600 на 1200. На пример, има многу големо убаво заглавие. Што се случува ако некое лице ја посети страницата со резолуција од 1024 на 768? Да, само капата ќе биде видлива. Не е добро? Можеби. Тогаш зошто да не се направи такво нешто што, со оглед на висината на прелистувачот/екранот, заглавието едноставно би се отсечело, а менито и останатиот дел од страницата би отишле? Леле, само она што ви треба.

Всушност, опишав еден од примерите што ги сретнав во пракса (види слика). Го решив проблемот едноставно - преку Javascript. Или можеби преку jQuery, не се сеќавам. Овде ќе ги опишам двата методи.

Пред сè, неопходно е да се направи разлика помеѓу дефинициите за „резолуција на екранот“ и „големина на прозорецот на прелистувачот“ (бидејќи во некои написи имаше инциденти - тие критикуваа некои методи, предложија други, иако во еден случај ја измерија резолуцијата на прелистувачот, во другиот - резолуцијата на мониторот).

Од самиот почеток треба да одредите што ви е поважно. Во случајот со тој пример со заглавието, ме водеа резолуцијата на екранот (мониторот): на крајот на краиштата, страницата е убава, ако прозорецот на прелистувачот е рачно намален, тогаш нека го прошират својот прелистувач на цел екран кога го гледаат ова сајт (тие немаат работа, знаете - белешка на уредникот). Но, на пример, за да ја прилагодам проширената слика на галеријата jQuery Lightbox, ги користев ширината и висината на прелистувачот.

И откако избравме, го пишуваме кодот, можеби во заглавието на страницата. Прво пример фокусиран на резолуцијата на екранот.

Линиите 3-6 се чисто javascript, линиите 7-11 се пример во jQuery. За одредување на ширината и висината, се користат методите на Javascript screen.width и screen.height. Она што го прават линиите е јасно: првата скрипта ја одредува патеката до дополнителна датотека CSS, а другиот го поставува својството css „background-position“ за блокот со вкупен идентификатор.

Да го погледнеме вториот пример, но кој ќе се фокусира на резолуцијата на прелистувачот. Сè е исто, методите се сменија.

Значи, од два примери, краток преглед на тоа што да се користи за што:

екран.ширина. Ја дефинира ширината на екранот (монитор).

екран.висина Ја одредува висината на екранот (монитор).

документ.тело.ширина на клиентот . Ја дефинира ширината на прелистувачот.

документ.тело.клиент Висина . Ја дефинира висината на прелистувачот.

$(прозорец).width() . Ја дефинира ширината на прелистувачот, но само ако е присутен jQuery.

$(прозорец).висина() . Ја дефинира висината на прелистувачот, но само ако е присутен jQuery.

Јасно е дека ако користите jQuery, тогаш опцијата 5 е подобра од 3, а 6 до 4 - тие се едноставно пократки. Па, зависи од вкусот и бојата.

Што се однесува до конкретните записи за висина и ширина на екранот за jQuery, да бидам искрен, не ги знам. Теоретски треба да има структура од 5-6 реда, но некако во пракса не сум сретнала, ми се чини дека ги нема. И тоа не е неопходно, екранот. ширината е доволно кратка конструкција, доволно е.

Да, има и $(document).width() - ја одредува ширината на HTML документот. Употребата во пракса е некако сомнителна. Кој знае, ќе ми биде драго ако споделите.

Тоа е се за денес! Да издржиме до викенд и масовно да одиме на скара! (освен ако не сте болни со нешто, како некои - забелешка на уредникот). Со среќа!

Здраво! Продолжувајќи ја темата во оваа лекција, ќе го разгледаме прашањето за лизгање на веб-страница и манипулирање со големини на прелистувачот. Како можете да ја пронајдете ширината на прелистувачот? Како да скролувате веб-страница користејќи JavaScript? Мислам дека ќе ги најдете одговорите на овие прашања во оваа лекција.

Ширина/висина на видливиот дел од прозорецот на прелистувачот Својствата на клиентот Width/Height за елемент се точно ширина/висина на видливата површина на прозорецот.


Не прозорец.внатрешна ширина/висина

Треба да се напомене дека сите прелистувачи освен IE8 можат да ги поддржат и својствата window.innerWidth/innerHeight. Тие штедат моментална големинапрозорец.

Која е разликата? Вие прашувате. Мал е, се разбира, но исклучително важен.

Својствата clientWidth/Height, доколку има лента за лизгање, ќе ја вратат точно ширината/висина во неа, достапна за целиот документ, а window.innerWidth/Height ќе го игнорира неговото присуство.

Ако десната страна на страницата е окупирана од лента за лизгање, тогаш овие линии ќе прикажуваат различни работи:

Предупредување (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:

Предупредување ("Тековен врв на лизгање: " + window.pageYOffset); alert("Тековен лев лизгање: " + window.pageXOffset);

Ова се сите својства:

• Не е поддржан IE8-
• Можат само да се читаат и не можат да се менуваат.

Ако IE8 не е важен, тогаш само ги користиме овие својства.

Опцијата за вкрстен прелистувач, земајќи го предвид IE8, обезбедува опција на documentElement:

Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Тековно лизгање: " + scrollTop);

Промена на лизгање на страницата: scrollTo, scrollBy, scrollIntoView

За да скролувате страница користејќи JavaScript, сите нејзини елементи мора да бидат целосно вчитани.

Кај обичните елементи, 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).

scrollIntoView

Методот elem.scrollIntoView(top) мора да се повика на елементот и да ја прелистува страницата така што елементот е на врвот ако горниот дел е точно, а на дното ако горниот е неточен. Покрај тоа, ако овој врвен параметар не е наведен, тогаш тој ќе биде еднаков на точно.

Анти-скролување

Постојат ситуации кога е неопходно да се направи документ „не може да се прелистува“. На пример, прикажување на големо поле за дијалог над документ, така што посетителот може да се движи низ полето за дијалог, но не и низ самиот документ.

Со цел да се спречи лизгање на страницата, само поставете го својството document.body.style.overflow = „скриено“.

Наместо 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, документ. documentElement .clientHeight);

Во оваа лекција, ќе ги разгледаме својствата на објектот на прозорецот, со кој можете да ги добиете димензиите на работната површина на прозорецот на прелистувачот (внатрешна ширина и внатрешна висина), димензиите на самиот прозорец (надворешна ширина и надворешна висина), неговата локација во однос на горниот лев агол на екранот на корисникот (налево на екранот и на врвот на екранот) и позициите скролувајте (pageXOffset и pageYOffset).

Карактеристики innerWidth и innerHeight

Тие се дизајнирани да ги добијат димензиите на видливата работна површина на прозорецот на прелистувачот. Оние. Својствата innerWidth и innerHeight се наменети за добивање на ширината и висината на областа во која се прикажува HTML документот. Овие својства се само за читање и враќаат вредности на пиксели.

На пример, добијте ја висината и ширината на видливата работна површина на прозорецот на прелистувачот:

Ширина на видливата област за гледање (widthContenArea):

Ширина на видливата област за гледање (висинаContenArea):

// ширина на видливиот приказ (за сите прелистувачи освен Internet Explorer 8) var widthContenArea = window.innerWidth; // висина на видливиот приказ (за сите прелистувачи освен Internet Explorer 8) var heightContenArea = window.innerHeight; // ширина на видливиот приказ за гледање (за Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || документ.тело.ширина на клиентот; // висина на видливиот приказ за гледање (за Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || документ.тело.клиентВисина; // ширина на видливиот приказ за гледање (за сите прелистувачи) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || документ.тело.ширина на клиентот; // висина на видливиот приказ за гледање (за сите прелистувачи) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || документ.тело.клиентВисина; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea;

Карактеристики outerWidth и outerHeight

Тие се дизајнирани да ги добијат димензиите на целиот прозорец на прелистувачот, т.е. вклучувајќи ленти со алатки, ленти за лизгање, статусна лента, граници на прозорци итн. Својствата outerWidth и outerHeight се само за читање и ги враќаат ширината и висината на прозорецот во пиксели, соодветно.

На пример, земете ја висината и ширината на прозорецот на прелистувачот:

Ширина на прозорецот на прелистувачот (widthWindow):

Висина на прозорецот на прелистувачот (heighWindow):

// ширина на прозорецот на прелистувачот var widthWindow = window.outerWidth; // висина на прозорецот на прелистувачот var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow;

Својства на екранот Left (screenX) и на екранот Top (screenY).

Тие се дизајнирани да ги добијат координатите на горниот лев агол на прозорецот или документот на прелистувачот во однос на горниот лев агол на екранот на корисникот.

Во овој случај, својствата screenLeft и screenTop работат во Internet Explorer, а својствата screenX и screenY работат во Mozilia Firefox. Во Chrome, Safari и други слични прелистувачи, можете да ги користите и својствата screenLeft и screenTop, како и својствата screenX и screenY.

Кога ги користите овие својства, мора да го земете предвид фактот дека некои прелистувачи може да ја вратат координатата на горниот лев агол на документот, а некои прелистувачи може да ја вратат координатата на горниот лев агол на прозорецот. Својствата на лев екран (screenX) и screenTop (screenY) се само за читање и ги враќаат хоризонталните и вертикалните растојанија во однос на левиот агол на екранот во пиксели, соодветно.

На пример, да ги прикажеме во форма на порака координатите x и y на левиот агол на тековниот прозорец (документ) на прелистувачот во однос на горниот лев агол на екранот:

функцијата windowXY() ( // Користејќи ги својствата screenleft и screenTop, ги добиваме координатите на локацијата на прозорецот (документот) var winX = window.screenLeft; var winY = window.screenTop; // Користејќи ги својствата screenX и screenY, добиваме координатите на локацијата на прозорецот (документот) winX = window.screenX, winY = window.screenY, // Добијте ги координатите на локацијата на прозорецот (документот) во сите прелистувачи winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Координати на прозорецот во однос на екранот на корисникот: X = " + winX + ", Y = " + winY + "."); ) Откријте го координати

својства pageXOffset (scrollX) и pageYOffset (scrollX)

Тие се дизајнирани да го добијат бројот на пиксели со кои документот е скролуван во хоризонтална (pageXOffset) или вертикална (pageYOffset) насока во однос на горниот лев агол на прозорецот. Својствата scrollX и scrollY се еквивалентни на својствата pageXOffset и pageYOffset, соодветно. Овие својства се само за читање.

На пример, прикажете го во порака бројот на пиксели со кои се скролуваше документот во хоризонтални (pageXOffset) и вертикални (pageYOffset) насоки.

функција scrollContent() (//Скролувајте го тековниот документ 200px на десно и надолу прозорец.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.pageXOffset || документ .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; предупредување („Број на пиксели со кои документот се скролувал хоризонтално и вертикално: X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Откријте ги позициите на лентите за лизгање