HTML DOM Element scrollTop 屬性

定義和用法

scrollTop 屬性設置或返回元素內容垂直滾動的像素數。

另請參閱：

scrollLeft 屬性

CSS overflow 屬性

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";
  } else {
    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
支持 支持 支持 支持 支持 支持