首页 > 关于js中scrollTop的理解?

关于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.


“他容器”, 这里指的是这个容器元素本身!!
看过mdn的其它翻译知道,如果是指他的父节点,会明确指出想对于parent的位置。

【热门文章】
【热门文章】