码农教程 - 一技在手,衣食无忧! tools

目录

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属性设置或返回元素内容垂直滚动的像素数。

也可以看看：

scrollLeft 属性

CSS 溢出属性

滚动事件

语法

返回scrollTop属性：

element.scrollTop

设置scrollTop属性：

element.scrollTop = pixels

属性值

Value Description
pixels The number of pixels the element's content is scrolled vertically.

If the number is negative, the number is set to 0.
If the element cannot be scrolled, the number is set to 0.
If the number is greater than maximum allowed, the number is set to the maximum.

返回值

类型 描述
数字 元素内容垂直滚动的像素数。

更多示例

示例

将 <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
Yes Yes Yes Yes Yes Yes
❮上一节 ❮ 元素对象参考 下一节❯