خصوصیت scrollTop HTML DOM Element

تعریف و استفاده

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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی