در این درس، خواص شیء پنجره را در نظر می گیریم، که می توانید اندازه منطقه کار پنجره مرورگر (Innerwidth و Innerhheight)، اندازه پنجره خود را (OUTERWIDTH و OUTERHEIGHT)، موقعیت آن دریافت کنید نسبت به گوشه بالا سمت چپ صفحه نمایش کاربر (screenleft و speasont) و موقعیت های پیمایش (pagexffset و pagetyoffset).

ویژگی های Innerwidth و Innerheight

آنها طراحی شده اند تا اندازه پنجره های فضای کاری قابل مشاهده مرورگر را به دست آورند. کسانی که. INNERWIDTH و INNERHEIGHT Properties برای به دست آوردن عرض و ارتفاع منطقه که در آن سند HTML نمایش داده می شود طراحی شده است. این خواص فقط خواندن و مقادیر بازگشت در پیکسل ها است.

به عنوان مثال، ارتفاع و عرض پنجره Workspace قابل مشاهده از مرورگر را دریافت کنید:

عرض نمای دید قابل مشاهده (widthcontenarea):

عرض نمای دید قابل مشاهده (HeightContenarea):

OUTERWIDTH و OUTERHEIGHT Properties

آنها طراحی شده اند تا اندازه کل پنجره مرورگر را به دست آورند. از جمله نوار ابزار، نوار پیمایش، نوار وضعیت، مرزهای پنجره، و غیره OUTERWIDTH و OUTERHEIGHT خواص فقط خواندنی هستند و عرض و ارتفاع پنجره را در پیکسل ها باز می گردانند.

به عنوان مثال، ارتفاع و عرض پنجره مرورگر را دریافت کنید:

مرورگر Windows Width (Widthwindow):

ارتفاع پنجره مرورگر (HeighWindow):

Properties Screenleft (Screenx) و Sypeont (Screenont)

آنها در نظر گرفته شده اند تا مختصات زاویه بالا سمت چپ پنجره مرورگر یا سند را در گوشه بالا سمت چپ صفحه نمایش کاربر بدست آورند.

در این مورد، Properties Screendleft و Screentop Properties در اینترنت اکسپلورر و خواص Screenx و screen در Mozilia Firefox کار می کنند. در کروم، مرورگرهای Safari، و سایر مرورگرهای مشابه می توانند هر دو خواص Screenleft و Sypeont و Screenont و Properties Screenont را استفاده کنند.

هنگام استفاده از این خواص، لازم است که این واقعیت را در نظر بگیریم که برخی از مرورگرها می توانند مختصات زاویه بالایی سمت چپ سند را بازگردانند و برخی از مرورگرها گوشه بالا سمت چپ پنجره را هماهنگ کنند. خواص Screenleft (ScreenX) و Screenont (Screenont (screenont) فقط خواندنی هستند و مقادیر فاصله را نسبت به گوشه سمت چپ به صورت افقی و عمودی در پیکسل ها بازگردانده می شوند.

به عنوان مثال، یک پیام از مختصات X و در گوشه سمت چپ پنجره مرورگر فعلی (سند) نسبت به گوشه بالا سمت چپ صفحه را بردارید:

مختصات را پیدا کنید

خواص pagexoffset (scrollx) و pagetyoffset (scrollx)

آنها در نظر گرفته شده اند تا تعدادی پیکسل را بدست آورند که سند در جهت افقی (Pagneffset) یا عمودی (Pagetyoffset) از گوشه سمت چپ بالای سمت چپ پنجره پیمایش شده است. Properties Scrollx و به صورت پیمایش با توجه به خواص PageXoffse و PagetyOffset معادل هستند. این خواص فقط خواندنی هستند

به عنوان مثال، برای نمایش تعداد پیکسل هایی که سند در جهت افقی (Pagxoffset) و عمودی (PagetyOffset) حرکت می شود.

موقعیت های نوار اسکرول را یاد بگیرید

سلام! در ادامه موضوع در این درس، ما چنین سؤالی را به عنوان یک صفحه وب پیمایش می کنیم و اندازه مرورگر را دستکاری می کنیم. چگونه می توانم عرض مرورگر را پیدا کنم؟ چگونه می توان از طریق صفحه وب جاوا اسکریپت حرکت کرد؟ پاسخ به این سوالات من فکر می کنم شما در این درس پیدا خواهید کرد.

عرض / ارتفاع بخش قابل مشاهده از پنجره مرورگر

خواص مشتری / ارتفاع برای عنصر فقط عرض / ارتفاع منطقه پنجره قابل مشاهده است.


نه window.innerwidth / ارتفاع

لازم به ذکر است که تمام مرورگرها، به جز IE8، همچنین می توانند از ویژگی های window.innerwidth / innerheight پشتیبانی کنند. آنها اندازه پنجره فعلی را ذخیره می کنند.

تفاوت در چیست؟ تو پرسیدی. مطمئنا کوچک است، اما بسیار مهم است.

خدمات مشتری / ارتفاع، اگر یک نوار پیمایش وجود داشته باشد، عرض / ارتفاع را در داخل آن بازگردانید، به کل سند دسترسی پیدا کنید، و Window.innerWidth / Height - حضور آن را نادیده می گیرد.

اگر سمت راست صفحه نوار پیمایش را بگیرد، این خطوط حذف خواهند شد:

هشدار (window.innerwidth)؛ // تمام پنجره پنجره هشدار کامل (document.documentelement.clientwidth)؛ // عرض کمتر پیمایش

معمولا ما فقط به عرض پنجره های موجود علاقه مند هستیم، به عنوان مثال، برای رسم چیزی، یعنی منهای نوار پیمایش. بنابراین، DecordElement.ClientWidth اغلب استفاده می شود.

عرض / ارتفاع صفحه وب با توجه به پیمایش

بله، به لحاظ نظری، بخش قابل مشاهده از صفحه، decordelement.clientwidth / ارتفاع است، اما اندازه کامل با توجه به نوار اسکرول به صورت مشابه، decordement.scrollwidth / scrollheight است.

این برای همه موارد عادی درست است.

اما برای صفحه با این خواص، ممکن است زمانی که پیمایش وجود دارد، مشکلی وجود داشته باشد، پس این نیست. در این مورد، آنها نادرست کار می کنند. من باید بگویم که در کروم / سافاری و مرورگرهای اپرا، در غیاب یک نوار پیمایش، ارزش documentElement.scrollheight در این مورد حتی ممکن است کمتر از documentelement.clientheight باشد، که البته، به نظر می رسد چیزی منطقی نیست

این مشکل ممکن است به طور خاص برای مستند سازی رخ دهد.

اما ممکن است به طور قابل اعتماد اندازه صفحه را تعیین کند، با توجه به پیمایش، به سادگی حداکثر این ویژگی های چندگانه را در نظر بگیرید:

var scrollvisota \u003d math.max (document.body.scrollvisota، document.documentelement.scrollheight، document.foyfsetvisota، document.documentelement.offsetheateight، document.cody.clientvisota، document.documentelement.clientheight)؛ هشدار ("ارتفاع، با توجه به اسکرول حساب:" + Scrollvisota)؛

دریافت پیمایش فعلی

اگر عنصر معمولی دارای پیمایش فعلی در Scrolleft / Scroltop باشد.

در مورد صفحه چیست؟

واقعیت این است که اکثر مرورگرها به درستی اسناد را پردازش می کنند. پرس و جو ScrolllellLLL / TOP، با این حال، Safari / Chrome / Opera دارای خطاهای است زیرا شما باید از سند استفاده کنید.

خوب، به منظور دور زدن این مشکل، شما می توانید از ویژگی های window.pagexoffset / pagetyoffset استفاده کنید:

هشدار ("پیمایش فعلی از بالا:" + window.pageyoffset)؛ هشدار ("پیمایش فعلی در سمت چپ:" + window.pagexoffset)؛

این همه خواص:

• IE8 پشتیبانی نمی شود
• آنها فقط می توانند آنها را بخوانند، اما تغییر غیرممکن است.

اگر IE8 نگران نباشد، ما به سادگی از این خواص استفاده می کنیم.

نسخه متقابل مرورگر با IE8 گزینه ای را برای مستند سازی فراهم می کند:

var scrollltop \u003d window.pageyoffset || document.documentelement.scrolltop؛ هشدار ("اسکرول فعلی:" + Scrolltop)؛

پیمایش تغییر صفحه: Scrollto، ScrollintoView

به منظور حرکت از طریق صفحه با استفاده از جاوا اسکریپت، تمام عناصر باید به طور کامل بارگیری شوند.

در عناصر معمولی Scroltop / Scrolleft، در اصل، شما می توانید تغییر دهید، و در همان زمان مورد پیمایش.

هیچ کس شما را به همان شیوه و با صفحه پوشاند. در تمام مرورگرها، علاوه بر Chrome / Safari / Opera، شما می توانید با استفاده از سند نصب ساده حرکت کنید. DocumentElement.Scrolltop، و در مشخص شده - شما باید از document.body.scrolltop برای این استفاده کنید. و همه چیز کاملا کار خواهد کرد.

اما یکی دیگر از راه حل های جهانی - روش های پیمایش ویژه از پنجره صفحه .Scrollby (X، Y) و window.scrollto (PageC، Paget) وجود دارد.

• روش اسکرول (X، Y) از طریق مختصات فعلی خود حرکت می کند.
• روش ScrollTo (PageX، Pagench) صفحه را به مختصات مشخص شده نسبت به کل سند حرکت می دهد. این معادل نصب Properties Scrollleelft / Scroltop خواهد بود. برای رفتن به ابتدای سند، می توانید مختصات (0.0) را مشخص کنید.

scrollindoview

روش elem.scrolllintoview (بالا) باید بر روی عنصر نامیده شود و صفحه را به گونه ای بچرخاند تا عنصر به بالا برسد، اگر پارامتر بالا درست باشد، و در پایین، اگر بالا برابر با نادرست باشد. علاوه بر این، اگر این پارامتر بالا مشخص نشده باشد، برابر خواهد بود.

پیمایش ممنوع

شرایطی وجود دارد که لازم باشد یک سند "غیر خرد شده" ایجاد شود. به عنوان مثال، هنگامی که کادر محاوره ای بزرگ در بالای سند نمایش داده می شود، به طوری که بازدید کننده می تواند از طریق این پنجره حرکت کند، اما نه سند خود.

به منظور جلوگیری از پیمایش صفحه، به اندازه کافی برای ارائه سند Document.Style.OverFlow \u003d "Hidden" Property.

به جای سند. بدن، ممکن است هر عنصری وجود داشته باشد که پیمایش آنها ممنوع است.

اما ضرر این روش این است که نوار اسکرول خود را از بین می برد. اگر او برخی از عرض را اشغال کرد، در حال حاضر این عرض آزاد است، و محتویات صفحه گسترش خواهد یافت، متن "پرش"، گرفتن همه چیز محل خالی است.

نتایج

• برای به دست آوردن اندازه بخش قابل مشاهده از پنجره، استفاده از اموال: document.documentelement.clientwidth / ارتفاع
• برای در نظر گرفتن اندازه نوار پیمایش باید استفاده شود: var scrollheight \u003d math.max (document.body.scrollheight، document.documentelement.scrollheight، document.fody.offsetheight، document.documentelement.offsetheight، document.cody.clientheight ، document.documentelement .clientheight)؛

هنگام توسعه رابط های سایت اغلب شما باید از جاوا اسکریپت استفاده کنید. البته بد است، اما در بعضی از شرایط، به سادگی غیرممکن است که همه چیز را به طور کامل بر روی CSS اجرا کنیم.

اسیر ترین نیاز به من در تعیین عرض یا ارتفاع پنجره مرورگر برای دستکاری های بیشتر است. در زیر تمام اطلاعات مربوط به این موضوع.

کجا می تواند مفید باشد؟

من برای همه صحبت نخواهم کرد، اما به من در ادغام با TextPattern` توسط انواع گالری ها، لغزنده ها و غیره تحت تاثیر قرار می گیرد، جایی که همه چیز بر روی JS خالص نوشته شده است. چیزهایی که به شدت وابسته به JS هستند نادر هستند، اما هنوز هم ملاقات می کنند، بنابراین این یادداشت ظاهر شد.

شما می توانید 2 راه را تعریف کنید: JS یا jQuery.

تعیین عرض یا ارتفاع با استفاده از JS خالص

این روش ترجیح داده شده است، زیرا موتور جاوا اسکریپت تقریبا هر مرورگر مدرن دارد. حتی مرورگرهای تلفن همراه آموخته اند که با JS کار کنند.

البته، امکان وجود دارد که کاربر برای خاموش کردن پردازش JS در مرورگر، اما به نظر من، چنین "افراد عجیب و غریب" بسیار زیاد نیست، زیرا تقریبا هر سایت از هر راه حل هایی که بر روی JS کار می کنند استفاده می شود.

در JS برای تعیین اندازه صفحه نمایششما باید از توابع استفاده کنید:

صفحه نمایش screen.width // صفحه نمایش صفحه نمایش. Height // ارتفاع صفحه نمایش

در اینجا یک نمونه بی معنی از استفاده از:

اگر از آن برای موقعیت برخی موارد در صفحه استفاده می کنید، بهترین راه حل از اندازه صفحه نمایش استفاده نمی شود، اما پنجره پنجره مرورگر. در JS آن را مانند این انجام می شود:

document.cody.clientwidth // مرورگر عرض سند document.clientheight // ارتفاع مرورگر

بر این اساس، در اینجا یک مثال بی معنی از استفاده است:

تعریف اندازه مرورگر با استفاده از jQuery

شخصا از روش زیر استفاده می کنم. این روش فقط کار می کند اگر قبلا کتابخانه جی کوئری را در سایت متصل کرده اید. در تمام سایت هایی که باید این کتابخانه را انجام دهم استاندارد DE / Infact است.

برای استفاده از کار جی کوئری ما باید از کد استفاده کنید:

$ (پنجره) .width ()؛ // عرض مرورگر $ (پنجره) .height ()؛ // ارتفاع مرورگر

و در نهایت من می خواهم بگویم که اگر امکان دارد بدون JS و JQuery به طور کلی یا به طور کلی یا به طور جزئی انجام شود، لازم است عمل کنیم.

به اجتماعی بگویید شبکه های

لازم است؟ به عنوان مثال، ما یک طرح زیبا از سایت داریم، که تمام زیبایی آن تنها در هنگام حل و فصل، 1600 در هر 1200 نمایش داده می شود. به عنوان مثال، او یک کلاه زیبا بسیار زیبا دارد. چه اتفاقی خواهد افتاد اگر یک فرد به این سایت با وضوح 1024 تا 768 می رود؟ بله، فقط کلاه قابل مشاهده خواهد بود. خوب نیست؟ شاید. پس چرا چنین چیزی را نمی فهمید که وقتی ارتفاع / صفحه مرورگر مرورگر را به سادگی قطع می کند، و به منو و بقیه سایت رفت؟ در، چه مورد نیاز است.

در واقع، من یکی از نمونه هایی را که در عمل مواجه شدم توصیف کردم (Cartigintka را ببینید). مشکل را به سادگی حل کرد - از طریق جاوا اسکریپت. و شاید از طریق jQuery، من به یاد نمی آورم. من هر دو روش را در اینجا توضیح خواهم داد.

اول از همه لازم است تعریف تعریف " وضوح صفحه"و" اندازه پنجره مرورگر"(از آنجایی که در برخی مقالات حوادث وجود داشت، حوادث - به تنهایی روش ها، آنها به دیگران ارائه می دادند، هرچند در یک مورد من رزولوشن مرورگر را اندازه گیری می کنم، از سوی دیگر - رزولوشن مانیتور).

لازم است از همان ابتدا تعیین شود که برای شما مهم تر است. در این مورد از یک مثال با یک کلاه، من بر روی رزولوشن صفحه تمرکز کردم (مانیتور): همه ی یکسان، سایت زیبا است اگر پنجره مرورگر به صورت دستی کاهش یابد، سپس مرورگر را هنگام مشاهده این سایت شروع کنید (هیچ چیز وجود ندارد خوردن تقریبا) اما، برای مثال، برای تنظیم تصویر گسترده گالری Lightbox جی کوئری، از عرض و ارتفاع مرورگر استفاده کردم.

و پس از انتخاب، کد را بنویسید، می توانید در هدر سایت قرار دهید. اول، یک مثال گرا وضوح صفحه.

3-6 خط - جاوا اسکریپت خالص، خطوط 7-11 - یک مثال در جی کوئری. روش های جاوا اسکریپت برای تعیین عرض و ارتفاع استفاده می شود. روش های عرض و صفحه نمایش. چه ردیف ها ساخته می شوند، روشن: اولین اسکریپت مسیر را به فایل CSS اختیاری تجویز می کند، و دیگری - برای بلوک شناسه کل، CSS "موقعیت پس زمینه" واقع شده است.

ما به مثال دوم نگاه می کنیم، اما بر روی رزولوشن مرورگر تمرکز خواهد کرد. همه چیز همان، روش ها تغییر کرده اند.

بنابراین، از دو مثال، یک مرور کلی - چه چیزی برای چه چیزی استفاده کنید:

1. screen.width. عرض صفحه نمایش (مانیتور) را تعریف می کند.
2. screen.height. ارتفاع صفحه نمایش (مانیتور) را تعیین می کند.
3. document.cody.clientwidth. عرض مرورگر را تعیین می کند.
4. document.cod.clientheight. ارتفاع مرورگر را تعیین می کند.
5. $ (پنجره) .width (). عرض مرورگر را تعیین می کند، اما فقط اگر جی کوئری داشته باشید.
6. $ (پنجره) .height (). ارتفاع مرورگر را تعیین می کند، اما فقط اگر جی کوئری داشته باشید.

واضح است که اگر از jQuery استفاده می کنید، به 5 گزینه از 3 و 6 به جای 4 ترجیح داده می شود - آنها کوتاه تر هستند. خوب، و بنابراین - طعم و رنگ.

همانطور که برای سوابق ارتفاع خاص و عرض صفحه نمایش برای jQuery - پس، در حقیقت، من آنها را نمی دانم. در تئوری، طراحی ردیف های نوع 5-6 باید باشد، اما به نوعی آن را در عمل نیافت، من به من دادم، آنها نیستند. بله، و بدون نیاز، screen.width یک طراحی کافی کوتاه است، کافی است.

بله، هنوز $ (سند) وجود دارد. Width () - عرض سند HTML را تعیین می کند. استفاده در عمل - به نوعی مشکوک است. چه کسی می داند - اگر شما به اشتراک بگذارید خوشحال خواهم شد.

امروز همه چیز! نگه داشتن تا آخر هفته و به طور گسترده در کباب بروید! (مگر اینکه شما با چیزی مانند برخی از آنها بیمار هستید - تقریبا.). موفق باشید!