تفاوت متد scroll با IntersectionObserver در جاوااسکریپت

شاید برای شما هم این اتفاق افتاده باشد که بین دو مقدار scroll event و IntersectionObserver مانده باشید و اینکه از کدام استفاده کنیم، برایتان یک سوال بزرگ باشد. در این مقاله سعی بر این داریم که به سوال شما پاسخ دهیم.

در اصل این دو بصورت بنیادین با هم متفاوت هستند. scroll یک رخ داد یا event در جاوا اسکریپت میباشد در صورتیکه IntersectionObserver یکی از سه API مبتنی بر ناظر در JavaScript است. دو API دیگر Resize Observer و Mutation Observer هستند.

Intersection Observer به راحتی امکاناتی مانند اسکرول بی‌پایان، بارگذاری تنبل تصاویر و انیمیشن‌های مبتنی بر اسکرول را فراهم می‌کند. این API به شما اجازه می‌دهد تا تغییرات در تلاقی یک عنصر هدف با یک عنصر والد یا با container اصلی سند را به صورت ناهمزمان مشاهده کنید .

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

کد اول با روش event scroll در کلاس دوره نوزدهم مدرسه پرنیان زده شده که در زیر میتوانید کامل شده آن را دانلود و استفاده کنید.

  const span = document.querySelector('span');
    const mainHeight = document.querySelector('main').clientHeight
    const box = document.querySelectorAll('.box')
    box.forEach((val)=>{
        val.setAttribute('data-h', val.offsetTop)
        val.classList.add(val.getAttribute('data-pgh'))
    })

    window.addEventListener('scroll', ()=>{
        let st = window.scrollY
        console.log(st);
        box.forEach((val)=>{
            if(
                (st+300) > val.getAttribute('data-h')
            ){
                val.classList.remove(val.getAttribute('data-pgh'))
            }else{
                val.classList.add(val.getAttribute('data-pgh'))
            }
        })

        // end top///

        if(st > mainHeight/2){
            span.style.opacity='1'
        }else{
            span.style.opacity='0'
        }
    })

دانلود کامل کد با روش اسکرول

Intersection Observer یک API است که برای تشخیص تعامل یک عنصر هدف با عنصر اجداد یا نمای سند استفاده می شود.به عنوان مثال، اگر بخواهیم تشخیص دهیم که آیا عنصری در viewport قابل مشاهده است، می توانیم از این API برای این منظور استفاده کنیم.

به کد زیر توجه کنید:

const target = document.querySelector(".target");
const container = document.querySelector(".container");
const btn = document.querySelector(".btn");
let isVisible = null;

const callBack = (entries) => {
      isVisible = entries[0].isIntersecting;
};

const options = {
      root: container,
      threshold: 1
};

const observer = new IntersectionObserver(callBack, options);

observer.observe(target);

btn.addEventListener("click", () => {
      if (isVisible) {
        alert("Target Element is visible");
  } else {
        alert("Target Element is not visible");
  }
});

در نظر داشته باشید از هر دو مورد بالا میتوانید در ساخت lazy load هم استفاده کنید.

امیدواریم از این مقاله تفاوت متد scroll با IntersectionObserver در جاوااسکریپت نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.