این آموزش در تاریخ ۱۴۰۱/۰۶/۲۷ آپدیت شده است.
آموزش متد scrollIntoView در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد scrollIntoView در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد scrollIntoView در DOM جاوااسکریپت
با استفاده از متد ()scrollIntoView میتونیم به یک بخش / محدوده خاصی از یک صفحه اسکرول کنیم و بهش دسترسی پیدا نماییم.
| مقدار برگشتی | بدون مقدار برگشتی |
|---|
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : با کلیک بروی یک دکمه، کاربر بطور خودکار اسکرول میشه روی بخش مشخص شده ما
|
1 2 3 4 5 6 7 8 |
<script> function Go(){ var MySection = document.getElementById("MyItem"); MySection.scrollIntoView(); } </script> |
مثال شماره ۲ : تو مثال قبلی اگه توجه کرده باشید ، اسکرول بصورت خشک انجام میشه ( یعنی یضرب میپره روی محل مشخص شده ) ولی خب ما میخوایم وقتی بروی دکمه کلیک شد، اسکرول بصورت نرم انجام بشه ( که به اصطلاح میگیم Smooth Scroll )
|
1 2 3 4 5 6 7 8 |
<script> function Go(){ var MySection = document.getElementById("MyItem"); MySection.scrollIntoView({block: 'start', behavior: 'smooth', inline: 'start'}); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()scrollIntoView | بله | بله | بله | بله * | بله |
* استفاده از آپشن ها ( مثه همون اسکرول نرم ) در مرورگر Safari پشتیبانی نمیشود.
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
- برای استفاده از چندین گزینه باید بین آنها کاما , گذاشت
|
1 |
Element.scrollIntoView( { Option_Name : 'Option_Value' , ... } ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Align | اختیاری – یک مقدار بولی یا Boolean true : بالای عنصر با بالای بخش اسکرول شده تراز میشود ( گزینه پیش فرض ) false : پایین عنصر با پایین بخش اسکرول شده تراز میشود |
Free-Learn
جدول آپشن ها
در جدول زیر میتوانید، آپشن هایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| نام آپشن | توضیح | مقادیر |
|---|---|---|
| behavior | برای تنظیم انیمیشن انتقال اسکرول ( یا همون اسکرول نرم ) |
auto یا smooth |
| block | برای تنظیم ترازبندی بصورت عمودی | start یا center یا end |
| inline | برای تنظیم ترازبندی بصورت افقی | start یا center یا end |
Free-Learn
نکات و توضیحات
- استفاده از آپشن ها در مرورگر Safari ( هم در کامپیوتر و هم در IOS موبایل ) پشتیبانی نمیشود.
