آموزش ویژگی scrollTop در DOM جاوااسکریپت

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

ویژگی scrollTop در DOM جاوااسکریپت

Free-Learn

ویژگی scrollTop در DOM جاوااسکریپت

با استفاده از ویژگی scrollTop میتونیم میزان یا مقدار ( اسکرول کردن بصورت عمودی از سمت بالا به پایین ) یک عنصر رو بدست آوریم و یا مقدار جدید براش تنظیم نماییم.

و همچنین با استفاده از ویژگی scrollLeft میتونیم میزان یا مقدار ( اسکرول کردن بصورت افقی از سمت چپ به راست ) یک عنصر رو بدست آوریم و یا مقدار جدید براش تنظیم نماییم.

مقدار برگشتی یک مقدار عددی که نشان دهنده میزان اسکرولی هست که بصورت عمودی انجام شده

Free-Learn

مثال از این ویژگی

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

مثال شماره ۱ : در مثال زیر هم از ویژگی scrollLeft و هم scrollTop استفاده شده ( برای بدست آوردن میزان اسکرول پیمایش شده بصورت افقی و عمودی )

امتحان کنید

مثال شماره ۲ : تنظیم مقدار جدید

امتحان کنید

مثال شماره ۳ : با هر بار کلیک بروی یک دکمه، به اندازه ۵۰px اسکرول بصورت عمودی انجام میشه.

امتحان کنید

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
scrollTop بله بله ۱۰ ۳٫۱ ۶

Free-Learn

شکل نوشتاری

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

  • برای گرفتن مقدار :

  • برای تنظیم / ست کردن مقدار جدید :

  • New_Number_Value : مقدار عددی به پیکسل که قرار است بصورت افقی اسکرول شود

Free-Learn

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

  • ویژگی scrollLeft مقدار اسکرول که بصورت افقی انجام میشود را برمیگرداند یا میتوان مقدار جدید تنظیم کرد.
  • ویژگی scrollTop مقدار اسکرول که بصورت عمودی انجام میشود را برمیگرداند یا میتوان مقدار جدید تنظیم کرد.
  • اگه بخواید مقدار جدید تنظیم نمایید باید مقدار بصورت عددی و بدون هیچ پیشوند یا پسوندی باشه، مثال :


Free-Learn

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