آخرین بازبینی: ۱۴۰۰/۰۹/۱۷

استفاده از IntersectionObserver در صفحات وب

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

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

IntersectionObserver چه طور کار می‌کند ؟

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

کاربرد IntersectionObserver

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

چه طور IntersectionObserver را فعال کنیم ؟

نمونه کد زیر، تمام تصاویر دلخواه را انتخاب می‌کند و زمانی که هر تصویر به Viewport برسد، کلاس animate را به آن‌ها اضافه می‌کند. با کمک CSS می‌توانیم عناصر دارای این کلاس را با افکت‌های دلخواه به حرکت در بیاوریم تا زمان حرکت کاربر، سایت شکل زیبایی پیدا کند.

const target = Array.from( document.querySelectorAll( 'div.content img' ) );

function handleIntersection( entries ) {

	entries.map( ( entry ) => {
		
		if( entry.isIntersecting ) {
			entry.target.classList.add( 'animate' )
		} else {
			entry.target.classList.remove( 'animate' )
		}
		
	} );
}

const observer = new IntersectionObserver( handleIntersection );

target.forEach(
	target => observer.observe( target )
);

const target = Array.from( document.querySelectorAll( 'div.content img' ) );

function handleIntersection( entries ) {

entries.map( ( entry ) => {

if( entry.isIntersecting ) {

entry.target.classList.add( 'animate' )

} else {

entry.target.classList.remove( 'animate' )

}

} );

}

const observer = new IntersectionObserver( handleIntersection );

target.forEach(

target => observer.observe( target )

);

مستندات Intersection Observer API در MDN

استفاده از IntersectionObserver در صفحات وب

IntersectionObserver چه طور کار می‌کند ؟

کاربرد IntersectionObserver

چه طور IntersectionObserver را فعال کنیم ؟

بیشتر بخوانید:

دیدگاهتان را بنویسید لغو پاسخ