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
属性值
| 值 | 描述 |
| pixels | 元素内容垂直滚动的像素数。 如果数字为负数，则数字将设置为 0。 如果元素不可滚动，则数字将设置为 0。 如果数字大于最大允许值，则数字将设置为最大值。 |
返回值
| 类型 | 描述 |
| 数字 | 元素内容垂直滚动的像素数。 |
更多示例
示例
将 <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 |
| 是 | 是 | 是 | 是 | 是 | 是 |
