最新的Web开发教程
 

HTML DOM scrollTop Propery

<元素对象

获得像素的内容的数量<div>元素被水平和垂直滚动的:

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

更多"Try it Yourself"下面的例子。


定义和用法

所述scrollTop的属性设置或返回一个元素的内容被垂直滚动的像素的数量。

提示:使用scrollLeft属性来设置或返回元素的含量水平滚动的像素数。

提示:要滚动条添加到一个元素,使用CSS 溢出财产。

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


浏览器支持

属性
scrollTop

句法

返回scrollTop的属性:

element .scrollTop

设置scrollTop的属性:

element .scrollTop= pixels

属性值

描述
pixels 指定元素的内容垂直滚动的像素数。

特别说明:
  • 如果数字为负值时,所述数量被设置为"0"
  • 如果元素不能被滚动时,数被设定为"0"
  • 如果数目大于允许的最大滚动量越大,数量被设置为最大数

技术细节

返回值: 一个数字,表示该元素的内容已被垂直滚动的像素数

例子

更多示例

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

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

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

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

滚动的内容<body>通过水平30个像素和10个垂直像素:

var body = document.body; // For Chrome, Safari and Opera
var html = document.documentElement; // Firefox and IE places the overflow at the <html> level, unless else is specified. Therefore, we use the documentElement property for these two browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;
试一试»

当用户向下滚动从页面顶部的50个像素,类名-在不同的滚动位置的类名之间切换"test"将被添加到一个元素(and removed when scrolled up again)

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个像素(add the slideUp class)

window.onscroll = function() {myFunction()};

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

绘制滚动一个三角形:

<!-- Use SVG to draw the triangle (has to be <path>) -->
<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z">
</svg>

<script>
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// The start position of the drawing
triangle.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

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

    var draw = length * scrollpercent;

    // Reverse the drawing (when scrolling upwards)
    triangle.style.strokeDashoffset = length - draw;
}
</script>
试一试»


<元素对象