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

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

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

Free-Learn

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

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

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

اگه اسکرول در باکسی که راست به چپ ( یا RTL ) باشد اتفاق بیوفتد، مقدار ویژگی scrollLeft در خروجی منفی می شود. ( مثال شماره ۳ )

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

Free-Learn

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

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

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

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

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

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

Free-Learn

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

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


Free-Learn

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