HTML DOM Element scrollTop özelliği

Tanım ve Kullanım

scrollTop Özellik, element içeriğinin dikey kaydırılan pixel sayısını ayarlar veya döndürür.

Ayrıca bakınız:

scrollLeft özelliği

CSS overflow özelliği

onscroll olayı

Örnek

Örnek 1

myDIV içeriğini kaydıran pixel sayısını alın:

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

kendiniz deneyin

Örnek 2

myDIV içeriğini 50 piksel yatay kaydır, 10 piksel dikey kaydır:

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

kendiniz deneyin

Örnek 3

myDIV içeriğini 50 piksel yatay kaydır, 10 piksel dikey kaydır:

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

kendiniz deneyin

örnek 4

<body>'ın içeriğini 30 piksel yatay kaydır, 10 piksel dikey kaydır:

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

kendiniz deneyin

örnek 5

Farklı kaydırma konumları arasında sınıflar arasında geçiş yapın - Kullanıcı sayfa üstünden 50 piksel aşağı kaydardığında, "test" sınıfı elemente eklenir (ve tekrar yukarı kaydırıldığında kaldırılır):

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

kendiniz deneyin

örnek 6

Kullanıcı sayfa üstünden 350 piksel aşağı kaydardığında bir elemente (slideUp sınıfını ekleyin):

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

kendiniz deneyin

gramer

scrollTop özelliğini geri döndürün:

element.scrollTop

scrollTop özelliğini ayarlayın:

element.scrollTop = pixels

özellik değeri

değer tanım
pixels

elementin dikey olarak kaydırdığı piksel sayısı.

  • Bu sayı negatifse, bu sayı 0 olarak ayarlanır.
  • Eğer element kaydıramazsa, bu sayı 0 olarak ayarlanır.
  • Bu sayı izin verilen maksimum değerin üstünde ise, bu sayıyı maksimum değere ayarlayın.

geri dönen değer

tür tanım
sayı elementin dikey olarak kaydırdığı piksel sayısı.

tarayıcı destekler

tüm tarayıcılar destekler element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek Destek Destek Destek Destek Destek