javascript - 关于js中scrollTop的理解？

问题描述

问 题

mdn:这个Element.scrollTop 属性可以设置或者获取一个元素距离他容器顶部的像素距离.

mdn是这样解释。距离他容器顶部指的是相对他的父容器吗？
下边的代码给#d1 设置scrollTop，为什么是其中的#d2移动呢？
而且#d2的位置是向上移动，又不是设置负值，为什么会向上移动呢？
我一直使用的都是jquery scrollTop（），以为这两个方法都是一回事。

<div id="d1">
    <div id="d2">
      111111111111
      222222222222
      333333333333
      444444444444
      555555555555
    </div>
</div>
*{padding:0;margin:0;}
#d1{margin:50px;width:50px;height:50px;background:yellow;overflow:hidden;}
#d2{width:50px;height:100px;background:red;}
window.onload = function(){
  document.getElementById("d1").scrollTop = 50px;
}

解决方案

The Element.scrollTop property gets or sets the number of pixels that the content of an element is scrolled upward.
MDN是这么说的, 翻译的人估计眼神不太好. 怎么说呢, 非常感谢那些为分享知识做出贡献的大神们, 但是也不可完全就相信了他们.
这句话依照我蹩脚的英语翻译过来, 意思是:
这个属性获取或设置其内容的像素值, 这个内容是一个向上滚动的元素. 这么翻译估计要好懂点.
值得一提的有两点:

1. 这是一个像素值, 所以只能接受数字值. 像楼主这样的带px单位的写法是一个典型的错误

2. 不能无限滚动, 若滚动超出其最大值(内容高度 - 包含框高度), 则自动设置为最大高度.

3. 接受负值, 但是负值相当于0.

这篇关于javascript - 关于js中scrollTop的理解？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！