انتقل إلى محتوى الدرس
الدرس 144
دورة جافا سكريبت

Scroll Properties

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

أقسام الدرس
4
الأمثلة
10
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,406
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

scrollHeight

هي عبارة عن خاصية تستخدم في تحديد ارتفاع عنصر معين بوحدة البيكسل 

هذا الارتفاع يتضمن ال padding لكنه لا يتضمن كل من (border , scrollbar . margin )

Syntax

HTML
element.scrollHeight

Example

HTML
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

HTML
element.scrollIntoView(alignTo)

Example

HTML
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

Example

HTML
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

HTML
element.scrollLeft

Example

HTML
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

HTML
element.scrollWidth

Example

HTML
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;

Example

HTML
var doc = document.getElementById("content");
				var x = doc.scrollWidth;
				document.getElementById ("p").innerHTML
						= "Width: " + x + "px";

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…