Այս դասում մենք կանդրադառնանք պատուհանի օբյեկտի հատկություններին, որոնց միջոցով կարող եք ստանալ զննարկչի պատուհանի աշխատանքային տարածքի չափերը (ներքին լայնություն և ներքին բարձրություն), պատուհանի չափսերը (արտաքին լայնություն և արտաքին բարձրություն), իր դիրքը ձախի նկատմամբ վերին անկյունօգտագործողի էկրանը (screenLeft և screenTop) և ոլորման դիրքերը (pageXOffset և pageYOffset):

Ներքին Լայնություն և ներքին Բարձրության հատկություններ

Դրանք նախատեսված են զննարկչի պատուհանի տեսանելի աշխատանքային տարածքի չափերը ստանալու համար: Դրանք ներքին Լայնության և ներքին Բարձրության հատկությունները նախատեսված են այն տարածքի լայնության և բարձրության արժեքները ստանալու համար, որտեղ ցուցադրվում է HTML փաստաթուղթը: Այս հատկությունները միայն կարդալու են և վերադարձնում են պիքսելային արժեքները:

Օրինակ ՝ զննարկչի պատուհանի տեսանելի աշխատանքային տարածքի բարձրությունն ու լայնությունը ստանալու համար.

Տեսանելի տարածքի լայնությունը (widthContenArea):

Տեսանելի տարածքի լայնությունը (heightContenArea):

Արտաքին լայնության և արտաքին Բարձրության հատկությունները

Դրանք նախատեսված են բրաուզերի ամբողջ պատուհանի չափը ստանալու համար, այսինքն. ներառյալ գործիքագոտիները, ոլորման տողերը, կարգավիճակի տողը, պատուհանի սահմանները և այլն: Արտաքին Լայնության և արտաքին Բարձրության հատկությունները կարդացվում են միայն և պատուհանի լայնությունն ու բարձրությունը վերադարձնում են համապատասխանաբար պիքսելներով:

Օրինակ ՝ զննարկչի պատուհանի բարձրությունն ու լայնությունը ստանալու համար.

Owsննարկչի պատուհանի լայնությունը (widthWindow):

Owsննարկչի պատուհանի բարձրությունը (heighWindow):

ScreenLeft (screenX) և screenTop (screenY) հատկությունները

Դրանք նախատեսված են զննարկչի պատուհանի վերին ձախ անկյունի կամ փաստաթղթի կոորդինատը ստանալու համար, օգտագործողի էկրանի վերին ձախ անկյունի համեմատ:

Էկրանի Ձախ և էկրանի վերևի հատկություններն աշխատում են Internet Explorer- ում, իսկ screenX և screenY հատկություններն աշխատում են Mozilia Firefox- ում: ԻՆ Chrome բրաուզերներ, Safari- ն և այլ նման զննարկիչները, կարող եք օգտագործել էկրանի Ձախ և էկրանի վերևի հատկությունները, ինչպես նաև էկրանի X և էկրանի հատկությունները:

Այս հատկություններն օգտագործելիս տեղյակ եղեք այն փաստի մասին, որ որոշ զննարկիչներ կարող են վերադարձնել փաստաթղթի վերին ձախ անկյունի կոորդինատը, իսկ որոշ զննարկիչներ ՝ պատուհանի վերին ձախ անկյունի կոորդինատը: Էկրանի ձախ (screenX) և screenTop (screenY) հատկությունները միայն ընթերցման համար են և համապատասխանաբար պիքսելներով վերադարձնում են էկրանի ձախ անկյունից հորիզոնական և ուղղահայաց հեռավորությունները:

Օրինակ ՝ եկեք ցուցադրենք զննարկչի ընթացիկ պատուհանի (փաստաթղթի) ձախ անկյունի x և y կոորդինատները ՝ էկրանի վերին ձախ անկյունին վերաբերող հաղորդագրության տեսքով.

Պարզեք կոորդինատները

PageXOffset (scrollX) և pageYOffset (scrollX) հատկությունները

Դրանք նախատեսված են այն փիքսելների քանակը ստանալու համար, որոնք փաստաթուղթը պտտվել է հորիզոնական (pageXOffset) կամ ուղղահայաց (pageYOffset) ուղղությամբ ՝ պատուհանի վերևի ձախ անկյունի համեմատ: ScrollX և scrollY հատկությունները համարժեք են համապատասխանաբար pageXOffset և pageYOffset հատկություններին: Այս հատկությունները միայն ընթերցման համար են:

Օրինակ, հաղորդագրության մեջ ցուցադրել այն պիքսելների քանակը, որով փաստաթուղթը ոլորվել է հորիզոնական (pageXOffset) և ուղղահայաց (pageYOffset) ուղղություններով:

Բացահայտեք ոլորման ձողերի դիրքը

Բարեւ! Շարունակելով թեման այս դասում ՝ մենք կանդրադառնանք այնպիսի խնդրի, ինչպիսին է ոստայնէջի ոլորումը և զննարկչի չափի շահարկումը: Ինչպե՞ս կարող եք գտնել զննարկչի լայնությունը: Ինչպե՞ս կարող եմ ոլորել մի կայք ՝ օգտագործելով JavaScript: Կարծում եմ, այս հարցերի պատասխանները կգտնեք այս ձեռնարկի մեջ:

Theննարկչի պատուհանի տեսանելի մասի լայնությունը / բարձրությունը

Հաճախորդի Լայնության / Բարձրության հատկությունները տարրի համար հենց տեսանելի պատուհանի տարածքի լայնությունն / բարձրությունն են:


Ոչ պատուհան: սկզբնական Լայնություն / Բարձրություն

Պետք է նշել, որ բացի IE8- ից ՝ բոլոր դիտարկիչները կարող են նաև աջակցել windows.innerWidth / innerHeight հատկությունները: Նրանք պահում են պատուհանի ներկայիս չափը:

Որն է տարբերությունը? Դուք հարցնում եք Դա, իհարկե, փոքր է, բայց չափազանց կարևոր:

Հաճախորդի Լայնության / Բարձրության հատկությունները, եթե կա ոլորման գոտի, կվերադարձնեն դրա մեջ հենց լայնությունը / բարձրությունը, որը հասանելի է ամբողջ փաստաթղթի և պատուհանի համար :innerWidth / Height- ը անտեսելու է դրա առկայությունը:

Եթե աջ կողմէջը զբաղեցնում է ոլորման սանդղակը, ապա այս տողերը ցույց կտան տարբեր ՝

Rtգուշացում (պատուհան. Նոր Լայնություն); // պատուհանի նախազգուշացման լրիվ ամբողջ լայնությունը (document.documentElement.clientWidth); // լայնություն մինուս ոլորում

Սովորաբար մեզ հետաքրքրում է միայն պատուհանի մատչելի լայնությունը, օրինակ `ինչ-որ բան նկարել, այսինքն` հանած ոլորման տողը: Հետևաբար, հաճախ օգտագործվում է documentElement.clientWidth- ը:

Ոլորման միջոցով վեբ էջի լայնությունը / բարձրությունը

Տեսականորեն էջի տեսանելի մասը documentElement.clientWidth / Height է, բայց ամբողջ չափը, ներառյալ ոլորման տողը, նման է documentElement.scrollWidth / scrollHeight- ին:

Սա ճիշտ է բոլոր ընդհանուր տարրերի համար:

Բայց այս հատկություններով էջի համար կարող է խնդիր առաջանալ ոլորման ժամանակ, այսինքն ՝ դա չէ: Այս դեպքում դրանք ճիշտ չեն գործում: Ես պետք է ասեմ, որ Chrome / Safari և Opera բրաուզերում, ոլորման տողի բացակայության դեպքում, փաստաթղթի արժեքը. Element.scrollHeight- ը կարող է նույնիսկ պակաս լինել

Այս հարցը կարող է առաջանալ հատուկ documentElement- ի համար:

Բայց էջի չափը կարող եք հուսալիորեն որոշել ՝ հաշվի առնելով ոլորումը, պարզապես վերցնելով այս մի քանի հատկությունների առավելագույնը.

Var scrollVisota = Math.max. նախազգուշացում («Բարձրություն ոլորումով.» + ոլորումVisota);

Ընթացիկ ոլորումը ստանում է

Եթե ​​սովորական տարրի համար, ընթացիկ ոլորումը կարելի է ձեռք բերել scrollLeft / scrollTop- ում:

Ինչ վերաբերում է էջին:

Բանն այն է, որ զննարկիչների մեծ մասը ճիշտ կմշակի պահանջը documentElement.scrollLeft / Top- ին, այնուամենայնիվ Safari / Chrome / Opera- ն ունի սխալներ, որոնք ձեզ ստիպում են օգտագործել document.body:

Դե, այս խնդրի շուրջ ընդհանրապես աշխատելու համար կարող եք օգտագործել windows.pageXOffset / pageYOffset հատկությունները.

Rtգուշացում («Ընթացիկ ոլորումը վերևից.» + Window.pageYOffset); նախազգուշացում («Ընթացիկ ոլորումը դեպի ձախ.» + windows.pageXOffset);

Սրանք բոլոր հատկություններն են.

• IE8- ը չի աջակցվում
• Դրանք կարելի է միայն կարդալ և փոփոխել հնարավոր չէ:

Եթե ​​IE8- ը չի հետաքրքրում, ապա պարզապես օգտագործեք այս հատկությունները:

IE8- ը հաշվի առնելով խաչբրաուզերային տարբերակը տալիս է փաստաթղթի տարբերակ Element:

Var scrollTop = windows.pageYOffset || document.documentElement.scrollTop; նախազգուշացում («Ընթացիկ ոլորում.» + scrollTop);

Էջի ոլորումը փոխելը. Ոլորել դեպի, ոլորել By, ոլորել IntoView

JavaScript- ի միջոցով էջը ոլորելու համար դրա բոլոր տարրերը պետք է ամբողջությամբ բեռնված լինեն:

Սովորական տարրերի վրա, scrollTop / scrollLeft- ը, սկզբունքորեն, կարող է փոխվել, և տարրը միաժամանակ ոլորվում է:

Ոչ ոք չի խանգարում ձեզ նույնը անել էջի հետ: Բոլոր զննարկիչներում, բացառությամբ Chrome / Safari / Opera- ի, կարող եք ոլորվել `պարզապես կարգավորելով document.documentElement.scrollTop, իսկ նշվածներում` դրա համար պետք է օգտագործել document.body.scrollTop: Եվ ամեն ինչ հիանալի կաշխատի:

Բայց կա մեկ այլ ՝ համընդհանուր լուծում. հատուկ մեթոդներոլորել էջի պատուհանը. ոլորել ըստ (x, y) և windows.scrollTo (pageX, pageY):

• ScrollBy (x, y) մեթոդը ոլորելու է էջը ՝ համեմատած դրա ընթացիկ կոորդինատների հետ:
• ScrollTo (pageX, pageY) մեթոդը ոլորում է էջը դեպի այն նշված կոորդինատներըամբողջ փաստաթղթի համեմատ: Դա համարժեք է scrollLeft / scrollTop հատկությունների կարգավորմանը: Փաստաթղթի սկիզբը ոլորելու համար պարզապես անհրաժեշտ է նշել կոորդինատները (0,0):

scrollIntoView- ը

Elem.scrollIntoView (վերև) մեթոդը պետք է կանչվի տարրի վրա և ոլորում է էջը այնպես, որ տարրը լինի վերևում, եթե վերևը ճիշտ է, իսկ ներքևում, եթե վերևը համապատասխանաբար կեղծ է: Ավելին, եթե այս վերին պարամետրը նշված չէ, ապա այն հավասար կլինի ճշմարիտին:

Կանխել ոլորումը

Կան իրավիճակներ, երբ դուք պետք է փաստաթուղթ կազմեք «առանց ոլորման»: Օրինակ, փաստաթղթի վերևում գտնվող մեծ երկխոսության վանդակը ցույց տալիս, որպեսզի այցելուը կարողանա ոլորել այդ պատուհանից, բայց ոչ թե փաստաթուղթը:

Էջի ոլորումը կանխելու համար պարզապես տեղադրեք document.body.style.overflow = "թաքնված" հատկությունը:

Document.body- ի փոխարեն կարող է լինել ցանկացած տարր, որը պետք է կանխել ոլորումը:

Բայց այս մեթոդի թերությունն այն է, որ ոլորման տողն ինքնին անհետանում է: Եթե ​​այն զբաղեցնում էր որոշակի լայնություն, ապա այժմ, համապատասխանաբար, այս լայնությունը կազատվի, և էջի բովանդակությունն ընդլայնվելու է, տեքստը «ցատկելու է» ՝ գրավելով ազատված տարածքը:

Արդյունքները

• Պատուհանի տեսանելի մասի չափը ստանալու համար օգտագործեք հատկությունը ՝ document.documentElement.clientWidth / Height
• Ոլորման հետ կապված էջի չափը ստանալու համար օգտագործեք ՝ var scrollHeight = Մաթ. .documentElement. հաճախորդի բարձրությունը);

Կայքերի համար միջերեսներ մշակելիս հաճախ ստիպված եք լինում օգտագործել JavaScript: Իհարկե դա վատ է, բայց որոշ իրավիճակներում պարզապես անհնար է ամեն ինչ ամբողջությամբ իրականացնել CSS- ում:

Ինձ համար ամենահաճախակի կարիքը առաջանում է զննարկչի պատուհանի լայնությունը կամ բարձրությունը որոշելու համար `հետագա մանիպուլյացիաների համար: Այս թեմայի վերաբերյալ ամբողջ տեղեկատվությունը կտրված է:

Որտեղ կարող է սա օգտակար լինել:

Ես չեմ խոսի բոլորի փոխարեն, բայց դա ինձ համար օգտակար է, երբ ինտեգրվել եմ Textpattern- ի բոլոր տեսակի պատկերասրահների, սլայդերի և այլնի հետ, որտեղ ամեն ինչ գրված է մաքուր JS- ով: Այն բաները, որոնք սերտորեն կապված են JS- ի հետ, հազվադեպ են լինում, բայց դրանք դեռ լինում են, այդ պատճառով էլ հայտնվեց այս հաղորդագրությունը:

Դուք կարող եք այն սահմանել 2 եղանակով. JS կամ jQuery:

Լայնությունը կամ բարձրությունը որոշելով մաքուր JS- ով

Սա նախընտրելի մեթոդն է, քանի որ գրեթե բոլորն ունեն JavaScript շարժիչ: ժամանակակից զննարկիչ... Նույնիսկ բջջային զննարկիչները սովորել են աշխատել JS- ի հետ:

Իհարկե, հավանականություն կա, որ օգտագործողն անձամբ անջատելու է JS մշակումը զննարկչում, բայց ինձ թվում է, որ այդքան «տարօրինակ մարդիկ» այնքան էլ շատ չեն, քանի որ գրեթե յուրաքանչյուր կայք օգտագործում է ինչ-որ լուծումներ, որոնք աշխատում են JS- ում: ,

JS- ում սահմանելու համար էկրանի չափսերը, դուք պետք է օգտագործեք գործառույթները.

Էկրանի լայնություն // Էկրանի լայնության էկրան. Բարձրություն // Էկրանի բարձրություն

Ահա օգտագործման անիմաստ դեպք.

Եթե ​​սա օգտագործում եք էջում որոշ տարրեր տեղադրելու համար, ապա լավագույն լուծումըչի օգտագործի էկրանի չափսերը, բայց զննարկչի պատուհանի չափսերը... JS- ում դա արվում է այսպես.

Document.body.clientWidth // owsննարկչի լայնության document.body.clientHeight // owsննիչի բարձրությունը

Ըստ այդմ, ահա անիմաստ օգտագործման դեպք.

Qննարկչի չափը jQuery- ով

Անձամբ ես օգտագործում եմ ստորև նկարագրված մեթոդը: Այս մեթոդը գործում է միայն այն դեպքում, եթե նախկինում ձեր կայքում միացրել եք jQuery գրադարանը: Բոլոր կայքերում, որոնք ես ստիպված եմ անել, այս գրադարանը փաստացի ստանդարտ է:

Մեր առաջադրանքի համար jQuery- ն օգտագործելու համար հարկավոր է օգտագործել ծածկագիրը.

$ (պատուհան). լայնություն (); // owsննարկչի լայնությունը $ (պատուհան): բարձրությունը (); // owsննարկչի բարձրությունը

Վերջում ես կցանկանայի ասել, որ եթե կա հնարավորություն առանց JS- ի և jQuery- ի, ընդհանրապես կամ մասամբ, ապա դա հենց այն է, ինչ դուք պետք է անեք:

Կիսվեք սոցիալական ցանցերում ցանցեր

Ինչի համար է դա? Օրինակ, մենք ունենք կայքի գեղեցիկ դասավորություն, որը ցույց է տալիս իր ողջ գեղեցկությունը միայն, ասենք, 1600 x 1200 բանաձևով: Օրինակ, այն ունի շատ մեծ գեղեցիկ վերնագիր: Ի՞նչ է տեղի ունենում, եթե մարդ կայք է այցելում 768-ի 1024-րդ կետայնությամբ: Այո, միայն գլխարկը տեսանելի կլինի: Ոչ լավ? Թերեւս Այդ դեպքում ինչու՞ չանել այնպիսի բան, որ զննարկչի / էկրանի բարձրության վրա վերնագիրն ուղղակի կտրվի, իսկ ընտրացանկը և կայքի մնացած մասը գնան: Մեջ, ինչ ձեզ հարկավոր է:

Իրականում ես նկարագրել եմ օրինակներից մեկը, որին գործնականում հանդիպել եմ (տե՛ս նկարը): Ես խնդիրը լուծեցի պարզապես ՝ javascript- ի միջոցով: Կամ գուցե jQuery- ի միջոցով չեմ հիշում: Ես նկարագրելու եմ երկու մեթոդներն էլ այստեղ:

Առաջին հերթին ՝ « էկրանի լուծաչափ«և» զննարկչի պատուհանի չափը«(քանի որ որոշ հոդվածներում տեղի ունեցան միջադեպեր. որոշ մեթոդներ ողջունեցին, մյուսներն առաջարկվեցին, չնայած մի դեպքում չափվեց զննարկչի լուծաչափը, մյուս դեպքում ՝ մոնիտորի լուծաչափը):

Անհրաժեշտ է հենց սկզբից պարզել, թե ինչն է ձեզ համար ավելի կարևոր: Վերնագրի հետ կապված այդ օրինակի դեպքում ես առաջնորդվում էի էկրանի լուծաչափով (մոնիտոր). Ի վերջո, կայքը գեղեցիկ է, եթե զննարկչի պատուհանը ձեռքով կրճատվում է, ապա թող այդ կայքը դիտելիս ընդլայնեն իրենց զննարկիչը ամբողջ էկրանին: (նրանց համար ոչինչ չկա, կարող եք խնդրեմ - մոտավոր խմբ.) Բայց, օրինակ, ընդլայնել պատկերասրահի պատկերը jQuery Lightboxես օգտագործել զննարկչի լայնությունը և բարձրությունը:

Եվ ձեր ընտրությունից հետո մենք գրում ենք կոդը, կարող եք կայքի վերնագրում: Նախ նպատակադրման օրինակ էկրանի լուծաչափ.

3-6 տողեր - մաքուր javascript, տողեր 7-11 - jQuery օրինակ: Լայնությունը և բարձրությունը որոշելու համար օգտագործեք javascript մեթոդներէկրան. լայնություն և էկրան: բարձրություն: Այն, ինչ անում են տողերը, պարզ է. Առաջին սցենարը գրում է լրացուցիչի ուղին CSS ֆայլ, իսկ մյուսը `ընդհանուր նույնացուցիչով բլոկի համար դնում է css հատկություն"ֆոնային դիրք":

Եկեք նայենք երկրորդ օրինակին, բայց որը կկենտրոնանա զննարկչի լուծման վրա: Ամեն ինչ նույնն է, մեթոդները փոխվել են:

Այսպիսով, երկու օրինակից կարճ ակնարկ- ինչ օգտագործել ինչի համար.

1. էկրանի լայնությունը... Սահմանում է էկրանի (մոնիտորի) լայնությունը:
2. էկրան: բարձրություն... Որոշում է էկրանի (մոնիտորի) բարձրությունը:
3. փաստաթուղթ. մարմին. հաճախորդի լայնություն... Որոշում է զննարկչի լայնությունը:
4. փաստաթուղթ. մարմին. հաճախորդի բարձրությունը... Որոշում է զննարկչի բարձրությունը:
5. $ (պատուհան). լայնություն ()... Սահմանում է զննարկչի լայնությունը, բայց միայն այն դեպքում, եթե առկա է jQuery:
6. $ (պատուհան): բարձրություն ()... Որոշում է զննարկչի բարձրությունը, բայց միայն այն դեպքում, եթե առկա է jQuery:

Հասկանալի է, որ եթե jQuery եք օգտագործում, ապա 5-րդ տարբերակը նախընտրելի է 3-ի փոխարեն, իսկ 6-ը 4-ի փոխարեն `դրանք պարզապես ավելի կարճ են: Դե ինչ, համն ու գույնը:

Ինչ վերաբերում է jQuery- ի էկրանի հատուկ բարձրություններին և լայնություններին, ապա ես անկեղծորեն չգիտեմ դրանք: Տեսականորեն, 5-6 տողի նման մի կառուցվածք պետք է լիներ, բայց ինչ-որ կերպ ես գործնականում չէի հանդիպել, ինձ թվում է, որ դրանք այդպես չեն: Եվ դա անհրաժեշտ չէ, էկրանի լայնությունը բավականին կարճ կառուցվածք է, բավական է:

Այո, կա նաև $ (փաստաթուղթ): width () - որոշում է լայնությունը HTML փաստաթուղթ... Գործնական կիրառումը ինչ-որ կերպ կասկածելի է: Ով գիտի, ես ուրախ կլինեմ, եթե կիսվեք:

Ահա այսօրվա համար: Մենք պահում ենք մինչև հանգստյան օրեր և մասսայաբար գնում ենք քյաբաբներ: (եթե դուք ինչ-որ բանից հիվանդ չեք, ինչպես ոմանք - խմբ.): Հաջողություն!