JavaScript Element scrollTop 属性

scrollTop属性设置或返回元素内容垂直滚动的像素数。

提示：使用scrollLeft属性设置或返回元素内容水平滚动的像素数。

提示：要将滚动条添加到元素，请使用CSS overflow属性。

提示：onscroll当一个元素的滚动条被滚动发生的事件。

实例：

获取<div>元素的内容水平和垂直滚动的像素数：

var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
属性
scrollTop	支持	支持	支持	支持	支持

语法

返回scrollTop属性：

element.scrollTop

设置scrollTop属性：

element.scrollTop = pixels

属性值

属性	类型	描述
pixels	Number	指定元素内容水平滚动的像素数。特别说明：如果该数字为负值，则该数字设置为“0” 如果无法滚动元素，则数字设置为“0” 如果该数字大于允许的最大滚动量，则将该数字设置为最大数量

技术细节

项目	描述
返回值：	一个数字，表示元素内容已水平滚动的像素数
DOM版本

更多例子

将<div>元素的内容滚动到水平50像素和垂直10像素：

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;

尝试一下

滚动<div>元素的内容BY 50个水平像素和10个垂直像素：

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;

尝试一下

滚动<div>元素的内容BY 50个水平像素和10个垂直像素：

var body = document.body; // Safari
var html = document.documentElement; // chrome、firefox、ie和opera将溢出放在<html>级别，除非另有规定。因此，我们对这些浏览器使用documentElement属性
body.scrollLeft  += 30;
body.scrollLeft  += 10;
html.scrollTop += 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";
  }
}

尝试一下

在滚动上绘制一个三角形：

<!-- 使用SVG绘制三角形（必须是<path>） -->
<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z">
</svg>

<script>
// 获取<path>元素的id和<path>的长度
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// 图纸的起始位置
triangle.style.strokeDasharray = length;

// 通过偏移破折号隐藏三角形。 删除此行以在滚动绘制之前显示三角形
triangle.style.strokeDashoffset = length;

// 在滚动上查找滚动百分比（使用跨浏览器属性），并在滚动百分比时找到相同数量的偏移量
window.addEventListener("scroll", myFunction);

function myFunction() {
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  var draw = length * scrollpercent;

  // 反转图形（向上滚动时）
  triangle.style.strokeDashoffset = length - draw;
}
</script>

尝试一下