Hur man bestämmer höjden på en js-sida. Hur man bestämmer "skärmupplösning" och "webbläsarfönsterstorlek" i JavaScript och jQuery. Ändra sidrullning: scrollTo, scrollBy, scrollIntoView

När du utvecklar gränssnitt för webbplatser måste du ofta använda JavaScript. Visst är detta dåligt, men i vissa situationer är det helt enkelt omöjligt att implementera allt helt i CSS.

Det vanligaste behovet jag har är att bestämma bredden eller höjden på webbläsarfönstret för vidare manipulation. Nedanför snittet finns all information om detta ämne.

Var kan detta vara användbart?

Jag kommer inte att tala för alla, men detta kommer väl till pass för mig när jag integrerar med Textpattern alla typer av gallerier, reglage, etc., där allt är skrivet i ren JS. Saker som är strikt knutna till JS är sällsynta, men de förekommer, varför denna anteckning dök upp.

Du kan definiera det på två sätt: JS eller jQuery.

Bestämning av bredd eller höjd med ren JS

Detta är den mest föredragna metoden, eftersom nästan alla moderna webbläsare har en JavaScript-motor. Även mobila webbläsare har lärt sig att arbeta med JS.

Naturligtvis finns det en möjlighet att användaren själv inaktiverar JS-bearbetning i webbläsaren, men det verkar för mig att det inte finns många sådana "konstiga människor", eftersom nästan varje sida använder någon form av lösning som körs på JS.

I JS, för att bestämma skärmstorlekar, måste du använda funktionerna:

Screen.width //Skärmbredd screen.height //Skärmhöjd

Här är ett meningslöst användningsexempel:

alert(skärm.bredd+"x"+skärm.höjd);

Om du använder detta för att placera vissa element på sidan, skulle den bästa lösningen vara att använda webbläsarfönstrets dimensioner snarare än skärmstorlekar. I JS görs detta så här:

Document.body.clientWidth //Browser width document.body.clientHeight //Browser height

Följaktligen är här ett meningslöst exempel på användning:

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

Webbläsarstorlek med jQuery

Personligen använder jag metoden som beskrivs nedan. Den här metoden fungerar bara om du tidigare har installerat jQuery-biblioteket på din webbplats. På alla webbplatser som jag måste skapa är detta bibliotek en de facto-standard.

För att använda jQuery för vår uppgift måste vi använda koden:

$(fönster).width(); //Webbläsarbredd $(window).height(); //Webbläsarhöjd

Och i slutändan skulle jag vilja säga att om det är möjligt att klara sig utan JS och jQuery i allmänhet eller delvis, så är det precis vad du behöver göra.

Dela på sociala medier nätverk

Vad är det här för? Till exempel har vi en vacker webblayout, som visar all sin skönhet endast med en upplösning på, säg, 1600 gånger 1200. Till exempel har den en mycket stor vacker rubrik. Vad händer om en person besöker webbplatsen med en upplösning på 1024 gånger 768? Ja, bara hatten kommer att synas. Inte bra? Kanske. Varför inte göra en sådan sak att, med tanke på höjden på webbläsaren/skärmen, rubriken helt enkelt skulle skäras av, och menyn och resten av sidan skulle försvinna? Wow, precis vad du behöver.

Egentligen beskrev jag ett av de exempel som jag stötte på i praktiken (se bild). Jag löste problemet helt enkelt - genom javascript. Eller kanske genom jQuery, jag kommer inte ihåg. Jag kommer att beskriva båda metoderna här.

Först och främst är det nödvändigt att skilja mellan definitionerna av "skärmupplösning" och "webbläsarfönsterstorlek" (eftersom det i vissa artiklar förekom incidenter - de kritiserade vissa metoder, föreslog andra, även om de i ett fall mätte webbläsarupplösningen, i den andra - bildskärmens upplösning).

Du måste avgöra redan från början vad som är viktigast för dig. När det gäller det exemplet med rubriken vägleddes jag av skärmens (skärmens) upplösning: trots allt är sajten vacker, om webbläsarfönstret förminskas manuellt, låt dem sedan utöka sin webbläsare till helskärm när de tittar på detta webbplats (de har ingen verksamhet, du vet - redaktörens anteckning). Men för att till exempel justera jQuery Lightbox-galleriets utökade bild använde jag webbläsarens bredd och höjd.

Och efter att vi har valt skriver vi koden, kanske i sidhuvudet. Först ett exempel fokuserat på skärmupplösning.

Raderna 3-6 är rent javascript, raderna 7-11 är ett exempel i jQuery. För att bestämma bredd och höjd används javascript-metoderna screen.width och screen.height. Vad raderna gör är tydligt: ​​det första skriptet anger sökvägen till ytterligare fil CSS, och den andra ställer in "background-position" css-egenskapen för blocket med identifieraren total.

Låt oss titta på det andra exemplet, men som kommer att fokusera på webbläsarupplösningen. Allt är sig likt, metoderna har förändrats.

Så, från två exempel, en kort översikt över vad man ska använda till vad:

skärmbredd. Definierar skärmens (monitorns) bredd.

skärm.höjd Bestämmer höjden på skärmen (monitorn).

document.body.clientWidth . Definierar webbläsarens bredd.

document.body.clientHeight . Definierar höjden på webbläsaren.

$(fönster).width() . Definierar webbläsarens bredd, men bara om jQuery är närvarande.

$(window).height() . Definierar höjden på webbläsaren, men bara om jQuery är närvarande.

Det är klart att om du använder jQuery så är alternativ 5 att föredra framför 3 och 6 till 4 - de är helt enkelt kortare. Tja, det beror på smak och färg.

När det gäller de specifika posterna för skärmhöjd och bredd för jQuery, för att vara ärlig, känner jag inte till dem. I teorin borde det finnas en struktur som 5-6 linjer, men på något sätt har jag inte stött på det i praktiken, det verkar för mig att de inte finns. Och det är inte nödvändigt, screen.width är en tillräckligt kort konstruktion, det räcker.

Ja, det finns också $(document).width() - bestämmer bredden på HTML-dokumentet. Användningen i praktiken är på något sätt tveksam. Vem vet, jag blir glad om du delar med dig.

Det är allt för idag! Låt oss hålla ut till helgen och gå och grilla massor! (om du inte är sjuk med något, som vissa - reds. anm.). Lycka till!

Hallå! För att fortsätta ämnet i den här lektionen kommer vi att titta på frågan om att rulla en webbsida och manipulera webbläsarstorlekar. Hur hittar du webbläsarens bredd? Hur rullar man en webbsida med JavaScript? Jag tror att du kommer att hitta svaren på dessa frågor i den här lektionen.

Bredd/höjd på den synliga delen av webbläsarfönstret. ClientWidth/Height-egenskaperna för ett element är exakt bredden/höjden på det synliga området i fönstret.


Inte fönster.innerBredd/Höjd

Det bör noteras att alla webbläsare förutom IE8 också kan stödja egenskaperna window.innerWidth/innerHeight. De sparar nuvarande storlek fönster.

Vad är skillnaden? Du frågar. Det är såklart litet, men oerhört viktigt.

ClientWidth/Height-egenskaperna, om det finns en rullningslist, kommer att returnera exakt den bredd/höjd inuti den, tillgänglig för hela dokumentet, och window.innerWidth/Height kommer att ignorera dess närvaro.

Om den högra sidan av sidan är upptagen av en rullningslist, kommer dessa rader att visa olika saker:

Alert(window.innerWidth); // hela bredden av fönstervarningen(document.documentElement.clientWidth); // bredd minus rullning

Vanligtvis är vi bara intresserade av den tillgängliga bredden på fönstret, till exempel för att rita något, det vill säga minus rullningslisten. Därför används ofta documentElement.clientWidth.

Bredd/höjd på en webbsida med hänsyn till rullning

Ja, teoretiskt sett är den synliga delen av sidan documentElement.clientWidth/Height, men den fulla storleken inklusive rullningslisten är analogt documentElement.scrollWidth/scrollHeight.

Detta gäller för alla vanliga element.

Men för en sida med dessa egenskaper kan ett problem uppstå när rullning antingen finns där eller inte. I det här fallet fungerar de inte korrekt. Det måste sägas att i Chrome webbläsare/ Safari och Opera, i avsaknad av en rullningslist kan värdet av documentElement.scrollHeight i det här fallet vara ännu mindre än documentElement.clientHeight, vilket naturligtvis ser ut som något ologiskt

Det här problemet kan uppstå specifikt för documentElement.

Men du kan på ett tillförlitligt sätt bestämma sidstorleken med hänsyn till rullning genom att helt enkelt ta maximalt av dessa flera egenskaper:

Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Höjd inklusive rullning: " + scrollVisota);

Hämta den aktuella rullningen

Om ett vanligt element har en aktuell scroll kan du få den i scrollLeft/scrollTop.

Så hur är det med sidan?

Poängen är att de flesta webbläsare kommer att hantera en begäran till documentElement.scrollLeft/Top korrekt, men Safari/Chrome/Opera har buggar som kräver att du använder document.body.

Tja, för att komma runt det här problemet helt och hållet kan du använda egenskaperna för window.pageXOffset/pageYOffset:

Alert("Nuvarande rullningsöverst: " + window.pageYOffset); alert("Nuvarande vänster rullning: " + window.pageXOffset);

Dessa är alla egenskaper:

• Stöds inte IE8-
• De kan bara läsas och kan inte ändras.

Om IE8 inte spelar någon roll, så använder vi bara dessa egenskaper.

Ett alternativ för flera webbläsare som tar hänsyn till IE8 ger ett alternativ på documentElement:

Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Aktuell rullning: " + scrollTop);

Ändra sidrullning: scrollTo, scrollBy, scrollIntoView

För att rulla en sida med JavaScript måste alla dess element vara helt laddade.

På vanliga element kan scrollTop/scrollLeft i princip ändras och elementet rullar.

Ingen hindrar dig från att göra detsamma med sidan. I alla webbläsare utom Chrome/Safari/Opera kan du bläddra genom att helt enkelt ställa in document.documentElement.scrollTop, och i dessa webbläsare ska du använda document.body.scrollTop för detta. Och allt kommer att fungera utmärkt.

Men det finns en annan, universell lösning - speciella sidrullningsmetoder window.scrollBy(x,y) och window.scrollTo(pageX,pageY).

• ScrollBy(x,y)-metoden rullar sidan i förhållande till dess nuvarande koordinater.
• ScrollTo(pageX,pageY)-metoden rullar sidan till de angivna koordinaterna i förhållande till hela dokumentet. Det kommer att motsvara att ställa in egenskaperna scrollLeft/scrollTop. För att rulla till början av dokumentet behöver du bara ange koordinaterna (0,0).

scrollIntoView

Metoden elem.scrollIntoView(top) måste anropas på elementet och rullar sidan så att elementet är överst om toppen är sant, och längst ner om toppen är falsk. Dessutom, om denna toppparameter inte är specificerad, kommer den att vara lika med true.

Anti-scroll

Det finns situationer när det är nödvändigt att göra ett dokument "icke rullningsbart". Till exempel att visa en stor dialogruta ovanför ett dokument så att besökaren kan bläddra igenom dialogrutan men inte själva dokumentet.

För att förhindra sidrullning, ställ bara in egenskapen document.body.style.overflow = "hidden".

Istället för document.body kan det finnas alla element som måste inaktiveras från att rulla.

Men nackdelen med denna metod är att själva rullningslisten försvinner. Om den upptog en viss bredd, kommer nu denna bredd att frigöras, och innehållet på sidan kommer att utökas, texten kommer att "hoppa" och ta upp allt ledigt utrymme.

Resultat

• För att få måtten på den synliga delen av fönstret, använd egenskapen: document.documentElement.clientWidth/Height
• För att få siddimensioner med hänsyn till rullning, använd: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document. documentElement .clientHeight);

I den här lektionen kommer vi att titta på egenskaperna för fönsterobjektet, med vilka du kan få dimensionerna på arbetsområdet i webbläsarfönstret (innerWidth och innerHeight), måtten på själva fönstret (outerWidth och outerHeight), dess plats i förhållande till det övre vänstra hörnet av användarens skärm (skärm Vänster och skärmöverst) och positionsrullning (pageXOffset och pageYOffset).

egenskaper för innerWidth och innerHeight

De är utformade för att erhålla måtten på det synliga arbetsområdet i webbläsarfönstret. De där. Egenskaperna innerWidth och innerHeight är avsedda att erhålla bredden och höjden på området där HTML-dokumentet visas. Dessa egenskaper är skrivskyddade och returnerar pixelvärden.

Få till exempel höjden och bredden på det synliga arbetsområdet i webbläsarfönstret:

Bredd på det synliga visningsområdet (widthContenArea):

Bredd på det synliga visningsområdet (heightContenArea):

// bredd på den synliga visningsporten (för alla webbläsare utom Internet Explorer 8) var widthContenArea = window.innerWidth; // höjden på den synliga visningsporten (för alla webbläsare utom Internet Explorer 8) var heightContenArea = window.innerHeight; // bredd på den synliga visningsporten (för Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // höjden på den synliga visningsporten (för Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // bredd på den synliga visningsporten (för alla webbläsare) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // höjden på den synliga visningsporten (för alla webbläsare) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea;

egenskaper för yttre bredd och yttre höjd

De är designade för att få måtten på hela webbläsarfönstret, d.v.s. inklusive verktygsfält, rullningslister, statusfält, fönsterkanter, etc. Egenskaperna outerWidth och outerHeight är skrivskyddade och returnerar fönstrets bredd och höjd i pixlar.

Hämta till exempel höjden och bredden på webbläsarfönstret:

Webbläsarfönstrets bredd (widthWindow):

Webbläsarfönsterhöjd (heighWindow):

// webbläsarfönsterbredd var widthWindow = window.outerWidth; // webbläsarfönsterhöjd var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow;

egenskaperna screenLeft (screenX) och screenTop (screenY).

De är utformade för att erhålla koordinaterna för det övre vänstra hörnet av webbläsarfönstret eller dokumentet i förhållande till det övre vänstra hörnet av användarens skärm.

I det här fallet fungerar egenskaperna screenLeft och screenTop i Internet Explorer, och egenskaperna screenX och screenY fungerar i Mozilia Firefox. I Chrome, Safari och andra liknande webbläsare kan du använda både screenLeft- och screenTop-egenskaperna, liksom screenX- och screenY-egenskaperna.

När du använder dessa egenskaper måste du ta hänsyn till att vissa webbläsare kan returnera koordinaten för dokumentets övre vänstra hörn, och vissa webbläsare kan returnera koordinaten för det övre vänstra hörnet av fönstret. Egenskaperna för screenleft (screenX) och screenTop (screenY) är skrivskyddade och returnerar de horisontella och vertikala avstånden i förhållande till skärmens vänstra hörn i pixlar.

Låt oss till exempel visa x- och y-koordinaterna i det vänstra hörnet av det aktuella webbläsarfönstret (dokument) i form av ett meddelande i förhållande till det övre vänstra hörnet av skärmen:

funktion windowXY() ( // Med hjälp av screenleft- och screenTop-egenskaperna får vi koordinaterna för fönstrets (dokument) plats var winX = window.screenLeft; var winY = window.screenTop; // Med hjälp av screenX- och screenY-egenskaperna får vi koordinaterna för fönstrets (dokumentets) plats winX = window.screenX; winY = window.screenY; // Hämta koordinaterna för fönstrets (dokumentets) plats i alla webbläsare winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Fönsterkoordinater i förhållande till användarens skärm: X = " + winX + ", Y = " + winY + "."); ) Ta reda på koordinater

egenskaper pageXOffset (scrollX) och pageYOffset (scrollX)

De är utformade för att få antalet pixlar som dokumentet har rullats med i horisontell (pageXOffset) eller vertikal (pageYOffset) riktning i förhållande till det övre vänstra hörnet av fönstret. Egenskaperna scrollX och scrollY motsvarar egenskaperna pageXOffset respektive pageYOffset. Dessa egenskaper är skrivskyddade.

Visa till exempel i ett meddelande antalet pixlar som dokumentet rullades med i horisontell (pageXOffset) och vertikal (pageYOffset) riktning.

function scrollContent() ( //Scrolla det aktuella dokumentet 200px till höger och nedåt window.scrollBy(200 200); //Hämta värdena med egenskaperna pageXOffset och pageYOffset var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Hämta värdena med vilka dokumentet rullades horisontellt eller vertikalt för Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //För alla webbläsare: winOffsetX = window.pageXOffset || document .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alert ("Antal pixlar med vilka dokumentet rullades horisontellt och vertikalt: X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Ta reda på positionerna för rullningslisterna