‎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;

<!DOCTYPE html>
<html>
<style>
#content {
  height: 100px;
  width: 100px;
  background-color: coral;
  padding: 15px;
  border: 10px solid black;
  margin: 10px;
  overflow: scroll;
}
</style>

<body>
<h1>The Element Object</h1>
<h2>The scrollHeight and scrollWidth Properties</h2>

<p>These properties return the height and width including padding, bet excluding borders, scrollbars, or margins.</p>

<p>Try to remove and/or change the different CSS property values, and click "Run" again to understand how it works.</p>

<div id="content">Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..</div>

</body>
</html>

--(go to editor for change code and run)

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

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

‎

‎توجه ـ‎scrollHeight , scrollwidth‎ هردو كل ارتفاع وعرض يك عنصر را برگشت ‎ميدهند، ازجمله مواردي كه قابل مشاهده نيستند .مقادير برحسب پيكسل ميباشد.

‎‎مكان افقي وعمودي اسكرول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;

--(go to editor for change code and run)

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

‎

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

--(go to editor for change code and run)

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

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

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

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

‎

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

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

‎‎element.crollIntoView(align)‎‎

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

‎
‎align	‎‎شرح
‎‎	‎‎اختياري است ومشابه مقدارtrue عمل ميكند .
‎true	‎‎بالاي عنصر‎(top element)‎ با بالاي ناحيه قابل مشاهده منطبق ميگردد.
‎false‎	‎‎پائين عنصر‎(bottom of Element)‎ با پائين ناحيه قابل مشاهده منطبق ميگردد .

‎

‎نكته ـ در بعضي عناصر، وابسته به نوع چيدمان آن‎(layout)‎ ممكن است عمل تطبيق بطور ‎كامل انجام نشود.

‎‎متد فوق مقداري را برگشت نمي دهد.

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

‎

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

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

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

--(go to editor for change code and run)

Previous > <Next

‎JS HTML DOM Element Scroll

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

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

--(go to editor for change code and run)

--(go to editor for change code and run)

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

--(go to editor for change code and run)

--(go to editor for change code and run)

--(go to editor for change code and run)

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

--(go to editor for change code and run)

‎‎element.crollIntoView(align)‎‎

--(go to editor for change code and run)

JS Tutorial آموزش جاوااسکریپت

JS Objects اشیاء جاوااسکریپت

JS Functions توابع جاوااسکریپت

JS Classes کلاسهای جاوااسکریپت

JS Async ناهمزمانی جاوااسکریپت

JS HTML DOM شئ دام

JS Browser BOM شئ مرورگر

JS Web APIs رابط های اپی آی وب

JS AJAX آجکس وجاوااسکریپت

JavaScript JSON

JavaScript vs JQuery

JS Graphics گرافیک جاوااسکریپت

JS References فهرست مطالب