‎JS HTML DOM Element Scroll

‎‎مديريت اسكرول عناصردرجاوااسكريپت

‎وقتي فضائي براي داده ها كافي نباشد براي مشاهده بخش هاي پنهان نيازمند حركت داده بسمت ‎هاي مختلف ميباشيم .وجود اسكرول در عناصر اين كار را امكان پذير ميكند .دراين صفحه بااستفاده ‎امكانات جاوااسكريپت مديريت اسكرول بحث مي شود .جگونگي تعريف اسكرول ‎در زبانHTML و CSS بحث شده است.

‎براي مديريت اسكرول عناصر، با دسترسي به ا شياءHTML DOM از طريق جاوااسكريپت انجام ميشود. ‎دراين بخش ويژگي ومتدهاي زير كه مرتبط با اسكرول است، بحث ميگردد:

‎
• ‎ScrollWidth‎ـ عرض اسكرول
• ‎ScrollHeight‎ـ ارتفاع اسكرول
• ‎scrollLeft‎ـ مكان اسكرول افقي
• ‎scrollTop‎ـ مكان اسكرول عمودي
• ‎‎scrollIntoView()‎‎‎ـ متد استقرار اسكرول براي ديد عنصر
‎

‎‎عرض وارتفاع اسكرولScrollwidth and Scrollheight -‎

‎عرض وارتفاع اسكرول ابعاد ناحيه ايست كه محتوي اسكرول ميشود .البته ناحيهpadding را ‎هم شامل ميگردد.

‎در مثال بعدي ناحيه‎"myDiv‎"‎پنجره ديد و‎"content‎"‎ناحيه قابل اسكرول مي باشد. ‎ناحيه‎"content‎"‎عنصر محتوائي ‎"myDiv‎"‎است .

‎‎مثال ـ عرض وارتفاع عنصر اسكرولي را همراهPadding نمايش ميدهد .

const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;

‎‎چگونه بالشتك‎(padding)‎ حاشيه ونوار پيمايش بر عرض وارتفاع تاثير ميگذارد .

const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;

‎در مثال بالا با اجرا در اديتور اندازهPadding راتغيير داده تا تاثير آنرا در عرض وارتفاع ‎مشاهده كنيد.

‎ويژگي‎scrollHeight‎ ارتفاع يك عنصر شام Padding را برميگرداند، اما حاشيه ها ‎ونوار هاي پيمايش شامل آن نميشود.

‎‎مكان افقي وعمودي اسكرولscrollLeft and scrollTop -‎

‎‎مثال ـ تعداد پيكسل محتوي عنصر‎"myDiv‎"‎كه اسكرول شده برگشت ميدهد .

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

‎مثال ـ محتوي‎"myDiv‎"‎را تا‎50‎ افقي و‎10‎ پيكسل عمودي قرار ميدهد. ‎اعداد فوق مكان پيكسلي اسكرول است.

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

‎مثال ـ در مثال زير مكان پيكسلي اسكرول افقي‎50 وعمودي ‎10‎ افزايش ‎پيدا ميكند .با كليك دكمهSCROLL افزايش انجام ميگيرد وتغييرمكان ميدهد .

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

‎‎ويژگي‎scrollLeft‎ تعداد پيكسل اسكرول افقي را تنظيم يا برگشت ميدهد.

‎‎اسكرول در پنجره ديدscrollIntoView -‎

‎‎با متد‎‎scrollIntoView()‎‎‎ ميتوان محتوائي در پنجره ديد قرار داد .

‎‎مثال ـ عنصري با شناسهid=‎"content‎"‎در ناجيه قابل مشاهده اسكرول ميشود .

const element = document.getElementById("content");
element.scrollIntoView();

‎‎نحوي استفاده از متد

‎‎element.crollIntoView(align)‎‎

‎‎اين متد داراي يك پارامتر ورودي اختياريست كه مقادير آن مطابق جدول زيراست:

‎‎مثال ـ دراين مثال يك عنصر ميتواند در بالا يا پائين ناحيه قابل مشاهده منطبق شود.

const element = document.getElementById("content");

function scrollToTop() {
  element.scrollIntoView(true);
}

function scrollToBottom() {
  element.scrollIntoView(false);