روشهای ساده برای بررسی وجود المنت در Viewport با Javascript



visibility  
mode_comment   ۲

روشهای ساده برای بررسی وجود المنت در Viewport با Javascript

به احتمال زیاد براتون پیش اومده که بخواید بررسی کنید که یک المنت در Viewport قرار دارد یا خیر. مثلا بهتون میگن که وقتی که المنت مورد نظر وارد Viewport شد فلان کار رو انجام بده (مثلا رنگ اون رو عوض کن یا ارتفاع یا ویژگی‌های دیگر اون رو تغییر بده).

مثلا فرض کنید که شما یک سیستم چت مثل تلگرام رو میخواید درست کنید. زمانی که پیام‌ها در Viewport قرار میگیرن، یک Request به سمت سرور ارسال میشه و پیام بصورت خوانده شده در میاد و کاربری که برای شما پیام فرستاده متوجه میشه که شما پیام اون رو مطالعه کرده اید.

کارهای زیادی میشه با این تکنیک انجام داد که در هر پروژه با پروژه دیگر تفاوت دارد.

Viewport چیست؟

به قسمتی از مرورگر که ما محتوای سایت رو در اون مشاهده میکنیم، Viewport میگن. یعنی tab و address bar و ... جز Viewport محسوب نمیشن و فقط اون قسمت داخلی رو شامل میشه.viewport

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

در حال حاضر اغلب مرورگر ها از متد getBoundingClientRect پشتیبانی می کنن. روشی که در پایین بیان میشه بر روی IE7+, iOS5+ Safari, Android2+, Blackberry, Opera Mobile, IE Mobile  تست شده است.

چگونه قرار داشتن المنت در Viewport رو بررسی کنیم؟

به کمک function زیر می تونید چک کنید که element مورد نظرتون درون viewport هست یا نه:

همونطور که مشاهده میکنید تابع بالا یک المنت رو میگیره و true و false برگشت میده و به شما میگه که المنت در Viewport قرار داره یا خیر. در خط 3 تا 5 کدهایی نوشته شده که اگر المنت رو با jQuery هم انتخاب کرده باشید، مورد پشتیبانی قرار داده بشه.

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

متخصص اندروید
دوست داری از طریق برنامه نویسی کسب درآمد کنی؟ اگر می خوای با برنامه نویسی وب و موبایل کسب درآمد کنی، جایی استخدام شی و یا حتی اینکه درامد ارزی داشته باشی، حتما دوره های متخصص سون لرن رو یه نگاه بنداز : متخصص شو arrow_back

اما سوال اینجاست که در صورتی که  موقعیت مکانی element به دلایلی مثل scroll کردن، لود شدن کامل element، تغییر سایز و یا ... تغییر کنه باید از چه روشی استفاده کنیم؟

راه حل اینه که باید کد زیر رو در انتهای تگ body قرار بدید:

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 53)

در کد بالا یک تابع بنام onVisibilityChange نوشته شده که وظیفش اینه که المنت مورد نظر رو زیر نظر بگیره و با استفاده از Callback به ما بگه که المنت مورد نظر از Viewport خارج شده یا خیر.

همونطور که در خط آخر میبینید با استفاده از متد on در jQuery رویدادهای مختلفی رو نظیر اسکرول و resize و ... قرار دادیم که اگر هر کدام از رویدادها رخ داد، بررسی وجود المنت در Viewport چک بشه.

ممکنه در viewport بیش از یک element وجود داشته باشه، در این صورت با پاک کردن یکی از اون ها ممکنه موقعیت مکانی مابقی element ها نیز تغییر کنه. در این صورت نیز می تونیم از کد بالا کمک بگیریم.

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

این کدها مرورگرهای قدیمی Internet Explorer رو نیز تحت پوشش قرار میده.

روشی جدید در مرورگرهای مدرن

یک API جدید بنام Intersection Observer API اضافه شده که کار بالا رو به راحتی و با Performance خیلی بالا میتونه انجام بده و امکانات بیشتری رو در اختیارتون قرار میده. چون این ویژگی اخیرا اضافه شده فقط در مرورگرهای مدرن پشتیبانی میشه.

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

در حال حاضر در وب‌سایت سون لرن آموزش کامل جاوا اسکریپت وجود داره که میتونید تهیه کنید و لذت ببرید و علاوه بر اون در همین ماه ثبت‌نام دوره متخصص جاوا اسکریپت هم شروع میشه که توی اون تعداد زیادی از قابلیت‌های Javascript و تکنولوژی‌های مفید و مدرن دیگر آموزش داده میشه. می تونید با شرکت در این دوره به متخصص جاوا اسکریپت تبدیل بشید.

نتیجه گیری

در این مطلب دیدیم که چطور میتونیم با استفاده از Javascript وجود یک المنت در Viewport رو بررسی کنیم و کارهای مورد نظرمون رو بر روی المنت مورد نظر انجام بدیم. برای اینکار از متد getBoundingClientRect استفاده کردیم و همچنین Intersection Observer API رو هم توضیح دادیم و مزایای اون رو هم بیان کردیم.

اگر شما هم روشی برای این کار دارید خوشحال میشم در بخش نظرات معرفی کنید.

comment دیدگاه کاربران
None Error

سلام عالی

محمد اسفندیاری

موفق باشید دوست عزیز

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.