خصائص scrollTop في عنصر DOM HTML

التعريف والاستخدام

scrollTop يحدد أو يعيد قيمة عدد الوحدات للسحب العمودى للعنصر.

انظر أيضًا:

خصائص scrollLeft

خصائص overflow CSS

حدث onscroll

مثال

مثال 1

الحصول على عدد الوحدات للسحب في محتوى "myDIV":

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

تجربة شخصية

مثال 2

السحب الافقى ل محتوى "myDIV" إلى 50 وحدة، السحب العمودى إلى 10 وحدات:

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

تجربة شخصية

مثال 3

السحب الافقى ل محتوى "myDIV" ب 50 وحدة، السحب العمودى ب 10 وحدات:

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

تجربة شخصية

مثال 4

تمرير محتوى <body> بشكل أفقي بـ 30 بكسل، بشكل عمودي بـ 10 بكسل:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

تجربة شخصية

مثال 5

تبديل بين أسماء الكلاسات في المواقع المختلفة للتمرير - عند مرور المستخدم من أعلى الصفحة إلى الأسفل بـ 50 بكسل، يتم إضافة كلاس "test" إلى العنصر (وإزالته عند التمرير مرة أخرى):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

تجربة شخصية

مثال 6

عندما يمر المستخدم من أعلى الصفحة إلى الأسفل بـ 350 بكسل، يتم سحب عنصر (إضافة كلاس slideUp):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

تجربة شخصية

القواعد

استرداد خاصية scrollTop:

element.scrollTop

تعيين خاصية scrollTop:

element.scrollTop = pixels

قيمة الخاصية

القيمة الوصف
pixels

عدد البكسلات الذي يمكن أن يتحرك فيه محتوى العنصر بشكل عمودي.

  • إذا كان الرقم سالبًا، يتم تعيين الرقم إلى 0.
  • إذا لم يكن العنصر قابلًا للتمرير، يتم تعيين الرقم إلى 0.
  • إذا كان الرقم أكبر من القيمة القصوى المسموح بها، يتم تعيين الرقم إلى القيمة القصوى.

القيمة التي يتم ردها

نوع الوصف
رقم عدد البكسلات الذي يمكن أن يتحرك فيه محتوى العنصر بشكل عمودي.

دعم المتصفح

جميع المتصفحات تدعم element.scrollTop[:]

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
دعم دعم دعم دعم دعم دعم