scrollTop、scrollLeft、scrollWidth、scrollHeight原理使用介绍

简介: 上面是一个网页,由于窗口大限的限制,没有完全显示出来,没有显示出来的,用阴影标注了。 上阴影就是 scrollTop;上阴影 + 白的 + 下阴影就是 scrollHeight。scrollTop 是“卷”起来的高度值,示例:   如果为 p 设置了 scrollTop,这些内容可能不会完全显示。


scrollTop、scrollLeft、scrollWidth、scrollHeight

上面是一个网页,由于窗口大限的限制,没有完全显示出来,没有显示出来的,用阴影标注了。

  • 上阴影就是 scrollTop;
  • 上阴影 + 白的 + 下阴影就是 scrollHeight。

scrollTop 是“卷”起来的高度值,示例:

<div style="width:200px;height:200px;background-color:#999999;overflow:hidden;" id="p">
  <div style="width:100px;height:300px;background-color:#FFFF00;" id="t">如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
<!--
var p = document.getElementById("p");
p.scrollTop = 10;
//-->
</script>

scrollTop、scrollLeft

由于为外层元素 p(注意是 p,不是 t)设置了 scrollTop,所以内层元素会向上“卷”,这卷起来的部分就是 scrollTop

scrollLeft 也是类似道理。

scrollWidth、scrollHeight

我们已经知道 offsetHeight自身元素的高度,而 scrollHeight内层元素的实际高度 + 外层元素 padding,包含内层元素的隐藏的部分。

上述中 p(注意是 p,不是 t)的 offsetHeight 为 200,而其 scrollHeight 为 300。如果 p 具有 padding,那么应该把 padding 算到 scrollHeight 中,但其 border、margin 不应计算在内。

scrollHeight 也是类似道理。

IE 和 FireFox 全面支持,而 Netscape 8(很老了) 和 Opera 7.6(很老了) 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。

目录
相关文章
|
8月前
window.scrollTop 不生效的原因,如何解决
window.scrollTop 不生效的原因,如何解决
259 0
|
5月前
|
JavaScript 前端开发
height、clientHeight、scrollHeight、offsetHeight区别
height、clientHeight、scrollHeight、offsetHeight区别
height、clientHeight、scrollHeight、offsetHeight区别
|
9月前
|
JavaScript 容器
为什么元素的 scrollTop 一直为 0?
为什么元素的 scrollTop 一直为 0?
410 0
|
前端开发 JavaScript API
JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条
JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条
68 0
|
JavaScript IDE 开发工具
JS 中 offsetHeight/scrollHeight/clientHeight 的区别
client* clientWidth/clientHeight 返回的是元素的内部宽度,它的值只包含 content + padding,如果有滚动条,不包含滚动条 clientTop 返回的是上边
scrollTop详测
scrollTop详测
106 0
|
前端开发
你知道offsetHeight、scrollHeight、clientHeight的区别吗?
前言 offsetHeight、scrollHeight、clientHeight这三个属性我们经常在开发中遇到,如果小伙伴们没有经常使用的话,很容易把这些属性搞混,比如说什么窗口高度、元素高度、内容高度等等。当然,现在的前端框架很多时候帮我们封装了这些属性,但是我们也不能太过依赖框架,底层的原理我们还是需要了解的,今天就来理一理这三个属性分别代表什么?
149 0
你知道offsetHeight、scrollHeight、clientHeight的区别吗?
|
JavaScript
JS - scrollWidth、clientWidth、offsetWidth 区别
JS - scrollWidth、clientWidth、offsetWidth 区别
109 0
JS - scrollWidth、clientWidth、offsetWidth 区别
|
JavaScript 前端开发
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?
clientWidth与clientHeight,offsetWidth与offsetHeight
clientWidth与clientHeight,offsetWidth与offsetHeight
124 0
clientWidth与clientHeight,offsetWidth与offsetHeight