آموزش متد scrollIntoView در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد scrollIntoView در DOM جاوااسکریپت با من همراه باشید.

متد scrollIntoView در DOM جاوااسکریپت

Free-Learn

متد scrollIntoView در DOM جاوااسکریپت

با استفاده از متد ()scrollIntoView میتونیم به یک بخش خاص یا یک عنصر خاص ( یا یک محدوده خاص و قابل مشاهده ) اسکرول کنیم و بهش دسترسی پیدا نماییم.

مقدار برگشتی بدون مقدار برگشتی

Free-Learn

مثال از این متد

در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : با کلیک بروی یک دکمه، به یک عنصر خاص در صفحه دسترسی پیدا مینماییم. ( یعنی اسکرول میشه روی عنصر خاص و مورد نظر )

امتحان کنید

مثال شماره ۲ : استفاده از آپشن های این متد ( اسکرول نرم یا Smooth )

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

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

نام متد Chrome Firefox Opera Safari IE
()scrollIntoView ۶۱ ۳۶ ۴۸ *۵٫۱ *۸

* استفاده از پارامتر ( true یا false ) در این متد مشکلی نداره و توسط مرورگرها پشتیبانی میشود ولی استفاده از آپشن ها ( جدول کمی پایین تر ) در مرورگرهای IE و Safari پشتیبانی نمیشود.

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.

  • نوشتاری بصورت پارامتری :

  • نوشتاری بصورت آپشنی ( دارای گزینه برای آپشن یا تنظیم ) : ( برای استفاده از چندین گزینه باید بین آنها کاما , گذاشت )

Free-Learn

جدول پارامترها

در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.

مقدار توضیح
Align اختیاری – یک مقدار بولی یا Boolean
true : بالای عنصر با بالای بخش اسکرول شده تراز میشود ( گزینه پیش فرض )
false : پایین عنصر با پایین بخش اسکرول شده تراز میشود

Free-Learn

جدول آپشن ها

در جدول زیر میتوانید، آپشن هایی را که میتوان در این متد استفاده کرد مشاهده نمایید.

نام آپشن توضیح مقادیر
behavior برای تنظیم انیمیشن انتقال ( یا همون اسکرول نرم ) auto یا smooth
block برای تنظیم ترازبندی بصورت عمودی start یا center یا end
inline برای تنظیم ترازبندی بصورت افقی start یا center یا end

Free-Learn

نکات و توضیحات

  • استفاده از آپشن ها ( جدول آپشن ها ) در مرورگر IE از نسخه ۸ به بالا و مرورگر Safari از نسخه ۵٫۱ به بالا پشتیبانی نمیشود.

Free-Learn

دریافت PDF یا پرینت این مطلب