Scroll Properties
في هذا الدرس سوف نتعرف علي مجموعة من الخصائص التي تستخدم في التعامل مع عجلة التمرير scroll wheel الخاصة بالماوس مثل التمرير لأعلي ولأسفل وعلي اليمين وعلي اليسار
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left Scroll Properties chevron_left JavaScript
Scroll Properties
</> scrollHeight
هي عبارة عن خاصية تستخدم في تحديد ارتفاع عنصر معين بوحدة البيكسل
هذا الارتفاع يتضمن ال padding لكنه لا يتضمن كل من (border , scrollbar . margin )
Syntax
element.scrollHeight
Example
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
document.getElementById ("demo").innerHTML = "Height: " + y ;
</> scrollIntoView
الدالة ( )scrollIntoView : هي عبارة عن دالة تستخدم في تمرير عنصر محدد الي المنطقة المرئية في نافذة المتصفح
Parameters
- alignTo : هي عبارة عن parameter يأخذ احدي القيمتين (true / false )
- true : تقوم بتمرير العنصر الي اعلي النافذه
- false : تقوم بتمرير العنصر الي اسفل النافذه
Syntax
element.scrollIntoView(alignTo)
Example
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
Example
function myFunction1() {
var e = document.getElementById("content1");
e.scrollIntoView(false); /* Makes the element */
}
function myFunction2() {
var e = document.getElementById("content2");
e.scrollIntoView(true);
}
function myFunction3() {
var e = document.getElementById("content3");
e.scrollIntoView(); /* Default is true */
}
</> scrollLeft
Element.scrollLeft : هي عبارة عن خاصية تحدد عدد وحدات البكسل التي يتم تمرير محتوى عنصر ما من الناحية اليسرى. إذا كان اتجاه العنصر هو rtl (من اليمين إلى اليسار) ، فإن scrollLeft يكون 0 وعندما يكون شريط التمرير في أقصى موضعه (في بداية المحتوى الذي تم تمريره) ، ثم يصبح سالبًا بشكل متزايد أثناء التمرير نحو نهاية المحتوي
Syntax
Return the scrollLeft
element.scrollLeft
Example
var doc = document.getElementById("div");
var x = doc.scrollLeft;
document.getElementById("p").innerHTML =
"Horizontal scroll: " + x + "px";
</> scrollWidth
يتم استخدام الخاصية DOM scrollWidth لإرجاع عرض العنصر. تتضمن هذه الخاصية المساحة المتروكة padding وكذلك المحتوى غير المرئي على الشاشة بسبب تجاوز السعة overflow ولكن لا يشمل الاطار border أو شريط التمرير أو الهامش marking .
وهي خاصية للقراءة فقط.
Syntax
element.scrollWidth
Example
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
Example
var doc = document.getElementById("content");
var x = doc.scrollWidth;
document.getElementById ("p").innerHTML
= "Width: " + x + "px";
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
