هماهنگی

برای جابجایی عناصر به اطراف ما باید با مختصات آشنا باشیم.

بیشتر روشهای جاوا اسکریپت با یکی از دو سیستم مختصات سروکار دارند:

1. نسبت به پنجره - شبیه به موقعیت: ثابت ، از بالای پنجره/لبه سمت چپ محاسبه می شود.
   • ما این مختصات را به عنوان clientx/clienty بیان خواهیم کرد ، هنگامی که ما خواص رویداد را مطالعه می کنیم ، استدلال چنین نام بعداً روشن می شود.
2. نسبت به سند - شبیه به موقعیت: مطلق در ریشه سند ، از سند بالا/لبه سمت چپ محاسبه می شود.
   • ما آنها را Pagex/Pagey نشان خواهیم داد.

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

در این تصویر ما یک نکته را در سند می گیریم و مختصات آن را قبل از پیمایش (سمت چپ) و بعد از آن (راست) نشان می دهیم:

وقتی سند پیمایش کرد:

• صفحه-مختصات مرتبط با اسناد به همان صورت باقی مانده است ، از بالای سند شمارش شده است (که اکنون از آن خارج شده است).
• Clienty-مختصات مرتبط با پنجره تغییر کرد (پیکان کوتاه تر شد) ، زیرا همان نقطه به بالای پنجره نزدیکتر شد.

مختصات عناصر: getBoundingClientRect

روش Elem. getBoundingClientRect () مختصات پنجره را برای حداقل مستطیل که ELEM را به عنوان یک شیء از کلاس داخلی داخلی محصور می کند ، برمی گرداند.

خصوصیات اصلی domrect:

• x/y-x/y مختصات منشاء مستطیل نسبت به پنجره ،
• عرض/ارتفاع - عرض/ارتفاع مستطیل (می تواند منفی باشد).

علاوه بر این ، خواص مشتق شده وجود دارد:

• بالا/پایین-هماهنگ Y برای لبه مستطیل بالا/پایین ،
• چپ/راست-هماهنگ X برای لبه مستطیل چپ/راست.

به عنوان مثال برای دیدن مختصات پنجره آن ، روی این دکمه کلیک کنید:

اگر صفحه را پیمایش کرده و تکرار کنید ، توجه خواهید کرد که هرچه موقعیت دکمه-ارتباط با پنجره تغییر می کند ، مختصات پنجره آن (اگر به صورت عمودی پیمایش می کنید) هماهنگ می شود.

در اینجا تصویر Elem. getBoundingClientRect () وجود دارد:

همانطور که مشاهده می کنید ، x/y و عرض/ارتفاع مستطیل را به طور کامل توصیف کنید. خواص مشتق شده را می توان به راحتی از آنها محاسبه کرد:

• چپ = x
• بالا = y
• راست = x + عرض
• پایین = y + قد

• مختصات ممکن است کسری اعشاری مانند 10. 5 باشد. این طبیعی است ، مرورگر داخلی از کسری در محاسبات استفاده می کند. لازم نیست هنگام تنظیم به سبک. left/top آنها را دور کنیم.
• مختصات ممکن است منفی باشد. به عنوان مثال ، اگر صفحه به گونه ای پیمایش شود که Elem اکنون بالای پنجره باشد ، سپس Elem. getBoundingClientRect (). بالا منفی است.

از نظر ریاضی ، یک مستطیل منحصر به فرد با نقطه شروع (x ، y) و بردار جهت (عرض ، ارتفاع) تعریف می شود. بنابراین خواص مشتق شده اضافی برای راحتی است.

از نظر فنی امکان منفی بودن عرض/ارتفاع وجود دارد ، که امکان مستطیل "کارگردانی" را فراهم می کند ، به عنوان مثالبرای نشان دادن انتخاب ماوس با شروع و پایان به درستی مشخص شده.

مقادیر منفی/ارتفاع منفی بدان معنی است که مستطیل در گوشه پایین سمت راست خود شروع می شود و سپس به سمت چپ "رشد می کند".

در اینجا یک مستطیل با عرض و ارتفاع منفی (به عنوان مثال عرض = -200 ، ارتفاع = -100) وجود دارد:

همانطور که مشاهده می کنید ، چپ/بالا در چنین حالتی با x/y برابر نیست.

اگرچه در عمل ، Elem. getBoundingClientRect () همیشه عرض/قد مثبت را برمی گرداند ، در اینجا ما فقط از عرض/قد منفی برای شما یاد می کنیم که چرا این خصوصیات به ظاهر کپی در واقع کپی نیستند.

اینترنت اکسپلورر به دلایل تاریخی از خصوصیات X/Y پشتیبانی نمی کند.

بنابراین ما می توانیم یک polyfill (اضافه کردن گیرنده ها در domrect. prototype) ایجاد کنیم یا فقط از بالا/سمت چپ استفاده کنیم ، زیرا آنها همیشه مانند x/y برای عرض/ارتفاع مثبت هستند ، به ویژه در نتیجه elem. getBoundingClientRect ().

شباهت های آشکار بین مختصات مرتبط با پنجره و موقعیت CSS وجود دارد: ثابت.

اما در موقعیت یابی CSS ، خاصیت راست به معنای فاصله از لبه راست است و خاصیت پایین به معنای فاصله از لبه پایین است.

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

ElementFrompoint (x ، y)

تماس با Document. ElementFrompoint (x ، y) بیشترین عنصر تو در تو را در مختصات پنجره (x ، y) برمی گرداند.

به عنوان مثال ، کد زیر برچسب عنصری را که اکنون در وسط پنجره قرار دارد برجسته و خروجی می کند:

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

روش Document. ElementFrompoint (x ، y) فقط در صورتی کار می کند که (x ، y) در داخل منطقه قابل مشاهده باشد.

اگر هر یک از مختصات منفی باشد یا از عرض/ارتفاع پنجره فراتر رود ، پس تهی باز می گردد.

در اینجا یک خطای معمولی وجود دارد که اگر ما آن را بررسی نکنیم ممکن است رخ دهد:

استفاده برای موقعیت یابی "ثابت"

بیشتر اوقات برای قرار دادن چیزی به مختصات نیاز داریم.

برای نشان دادن چیزی در نزدیکی یک عنصر ، می توانیم از GetBoundingClientRect برای به دست آوردن مختصات آن استفاده کنیم و سپس موقعیت CSS را به همراه چپ/بالا (یا راست/پایین) قرار دهیم.

به عنوان مثال ، عملکرد CreatEmessageUnder (Elem ، HTML) در زیر پیام تحت ELEM را نشان می دهد:

برای اجرای آن روی دکمه کلیک کنید:

دکمه با پیام در زیر آن ظاهر می شود

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

اما به جزئیات مهم توجه داشته باشید: وقتی صفحه پیمایش می شود ، پیام از دکمه دور می شود.

دلیل این امر واضح است: عنصر پیام به موقعیت متکی است: ثابت ، بنابراین در همان مکان پنجره باقی می ماند در حالی که صفحه دور می شود.

برای تغییر آن ، ما باید از مختصات و موقعیت مبتنی بر اسناد استفاده کنیم: مطلق.

مختصات سند

مختصات مربوط به اسناد از گوشه سمت چپ بالای سند شروع می شود ، نه پنجره.

در CSS ، مختصات پنجره با موقعیت مطابقت دارد: ثابت ، در حالی که مختصات اسناد شبیه به موقعیت هستند: مطلق در بالا.

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

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

دو سیستم مختصات توسط فرمول متصل می شوند:

• pagey = clienty + ارتفاع قسمت عمودی پیمایش شده سند.
• pagex = clientx + عرض قسمت افقی پیمایش شده سند.

عملکرد GetCoords (ELEM) مختصات پنجره را از Elem. getBoundingClientRect () می گیرد و پیمایش فعلی را به آنها اضافه می کند:

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

عملکرد اصلاح شده CreatEmessageUnder:

خلاصه

هر نکته در صفحه مختصات دارد:

1. نسبت به پنجره - elem. getBoundingClientRect ().
2. نسبت به سند - elem. getBoundingClientRect () به علاوه پیمایش صفحه فعلی.

مختصات پنجره برای استفاده با موقعیت عالی است: ثابت و مختصات اسناد با موقعیت خوب عمل می کنند: مطلق.

هر دو سیستم مختصات جوانب مثبت و منفی خود را دارند. مواقعی وجود دارد که به یک یا دیگری نیاز داریم ، دقیقاً مانند موقعیت CSS مطلق و ثابت.

وظایف

مختصات پنجره ای از قسمت را پیدا کنید

در iframe در زیر می توانید سندی را با "زمینه" سبز مشاهده کنید.

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

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

کد شما باید از DOM برای دریافت مختصات پنجره ای استفاده کند:

1. گوشه چپ بالا و بیرونی (این ساده است).
2. پایین و راست ، گوشه بیرونی (ساده).
3. گوشه سمت چپ ، گوشه داخلی (کمی سخت تر).
4. گوشه پایین ، گوشه داخلی (روش های مختلفی وجود دارد ، یکی را انتخاب کنید).

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

پ. کد همچنین باید در صورتی که عنصر دارای اندازه یا مرز دیگری باشد ، به هیچ مقادیر ثابت محدود شود.

گوشه های بیرونی

گوشه های بیرونی اساساً همان چیزی است که ما از Elem. getBoundingClientRect () دریافت می کنیم.

مختصات پاسخ گوشه سمت چپ بالا 1 و گوشه پایین سمت راست 2:

گوشه داخلی سمت چپ

که با عرض مرز از گوشه بیرونی متفاوت است. یک روش قابل اعتماد برای دستیابی به فاصله ، مشتری مداری/clienttop است:

گوشه داخلی راست

در مورد ما باید اندازه مرزی را از مختصات بیرونی جدا کنیم.

ما می توانیم از CSS Way استفاده کنیم:

یک روش جایگزین برای اضافه کردن ClientWidth/ClientHeight به هماهنگی های گوشه سمت چپ است. این احتمالاً حتی بهتر است:

یک یادداشت در نزدیکی عنصر نشان دهید

بسته به موقعیت در نزدیکی عنصر لنگر ، یک موقعیت عملکرد (لنگر ، موقعیت ، ELEM) ایجاد کنید که ELEM را قرار می دهد.

موقعیت باید یک رشته با هر یک از 3 مقدار باشد:

• "بالا" - موقعیت ELEM درست بالای لنگر
• "درست" - موقعیت ELEM را بلافاصله در سمت راست لنگرگاه
• "پایین" - موقعیت Elem را زیر لنگر قرار دهید

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

در اینجا نسخه ی نمایشی یادداشت ها وجود دارد:

در این کار فقط باید مختصات را به طور دقیق محاسبه کنیم. برای جزئیات بیشتر به کد مراجعه کنید.

لطفاً توجه داشته باشید: عناصر باید در این سند باشند تا از ویژگی های دیگر و سایر خصوصیات خوانده شوند. مخفی (نمایشگر: هیچ) یا خارج از عنصر سند هیچ اندازه ای ندارد.