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

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

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

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

Viewport چیست؟

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

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

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

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

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

function isElementInViewport (el) {
    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
    );
}

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

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

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

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

function onVisibilityChange(el, callback) {
    var old_visible;
    return function () {
        var visible = isElementInViewport(el);
        if (visible != old_visible) {
            old_visible = visible;
            if (typeof callback == 'function') {
                callback();
            }
        }
    }
}

var handler = onVisibilityChange(el, function() {
    /* your code go here */
});


//jQuery
$(window).on('DOMContentLoaded load resize scroll', handler);

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

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

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

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

if (window.addEventListener) {
    addEventListener('DOMContentLoaded', handler, false); 
    addEventListener('load', handler, false); 
    addEventListener('scroll', handler, false); 
    addEventListener('resize', handler, false); 
} else if (window.attachEvent)  {
    attachEvent('onDOMContentLoaded', handler); // IE9+ :(
    attachEvent('onload', handler);
    attachEvent('onscroll', handler);
    attachEvent('onresize', handler);
}

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

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

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

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

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

نتیجه گیری

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

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

نویسنده

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

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.