JavaScript

Scroll Properties

في هذا الدرس سوف نتعرف علي مجموعة من الخصائص التي تستخدم في التعامل مع عجلة التمرير scroll wheel الخاصة بالماوس مثل التمرير لأعلي ولأسفل وعلي اليمين وعلي اليسار

التاريخ

16 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

766

المواضيع

24
الشروحات 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";
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.