HTML DOM 元素 scrollTop
示例
獲取 "myDIV" 內容垂直滾動的畫素數
const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;
自己動手試一試 »
將 "myDIV" 的內容水平滾動到 50 畫素，垂直滾動 10 畫素
const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;
自己動手試一試 »
將 "myDIV" 的內容水平滾動偏移 50 畫素，垂直滾動 10 畫素
const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;
自己動手試一試 »
更多示例見下文。
描述
scrollTop 屬性設定或返回元素內容垂直滾動的畫素數。
語法
返回 scrollTop 屬性
element.scrollTop
設定 scrollTop 屬性
element.scrollTop = pixels
屬性值
| 值 | 描述 |
| 畫素 | 元素內容垂直滾動的畫素數。 如果數字為負，則數字設定為 0。 如果元素無法滾動，則數字設定為 0。 如果數字大於允許的最大值，則數字設定為最大值。 |
返回值
| 型別 | 描述 |
| Number | 元素內容垂直滾動的畫素數。 |
更多示例
示例
將 <body> 的內容水平滾動 30 畫素，垂直滾動 10 畫素
const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;
自己動手試一試 »
示例
在不同的滾動位置之間切換類名 - 當用戶從頁面頂部向下滾動 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 = "";
}
}
自己動手試一試 »
示例
當用戶從頁面頂部向下滾動 350 畫素時，元素滑入（新增 slideUp 類）
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}
自己動手試一試 »
瀏覽器支援
element.scrollTop 在所有瀏覽器中都支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 是 |
