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 除外)。

时间: 2024-11-02 22:51:51

scrollTop、scrollLeft、scrollWidth、scrollHeight原理使用介绍的相关文章

memcached高可用集群原理及介绍

memcached高可用集群原理及介绍.memcached在实现分布式群集部署时,memcached服务之间是不能进行通讯的,分布式也是通过客户端的算法吧数据保存在不同的memcached中,所以当我们做完群集客户端往里面写入数据时,会出现下面的情况. 客户端往一个memcached节点写入数据后,另外两个节点是查询不到的. 那么如何结局额这个问题,就是接下来要做的了. memcached这种群集之间不能相互通讯导致了这种情况,这在访问量很大的web网站中是不允许的.所以我们就要使用到一个mag

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解_经验交流

scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置  offsetTop

jQuery 1.9.1丢弃的功能($.browser,scrollTop,scrollLeft)

jQuery1.9.1有不再支持了,scrollTop 和 scrollLeft 方法了. 个人还是觉得这次更新有点太"激进",都不向后兼容一下.而且这次还没有像browsers在API中指出替代的方法. 现在的办法就只有把原来的元素设置为relative;然后animate{"left":val,"top":val}要滚动的内容了. 没有了 $.browser 转而使用 $.support 现在希望大家使用 feature detection,

Web Service 运行原理详细介绍_java

     利用清明小假期,温习了一遍Web Service的相关内容,对其工作原理进行了简要总结.以供有需求的朋友和自己日后参考.文章若有不当之处,敬请朋友们提出宝贵建议,以求共勉.       Web服务中,我们应该首先了解相关的术语含义:WSDL.UDDI....相关术语方面的介绍在此不再赘述,重点放在原理上. 在Web服务中,存在三个角色:服务提供者.服务请求者和服务中介,三者之间的关系如图1-1所示     实现一个完整的Web服务包括以下步骤:    ◆ Web服务提供者设计实现Web

正则表达式的原理和介绍,应用(概念篇)

概念|正则 极小元的概念定义:对于任何的集合S1与S2,当S1∈S2且S1∩S2=空(没有空这个符号,我用中文字空代替)时,则称S1为S2的一极小元.OK说完了定义,我们来说说关于正则匹配的东东,可以把要寻找的那个字符串看成一个集合S1,而要寻找的是一个极小元,也就是一个子集而离散的正则定理:每个不空的集合,都有一极小元,明确的说出了,正则匹配的道理,我们要去寻找的是一个子集,也就是把大的字符串进行了分割,而其元素为一个个小的字符串子集正则公理的数学表达式:A≠空 推出 (存在x)(x∈A∧x∩

PHP 伪静态技术原理以及突破原理实现介绍

伪静态技术比较好突破,需要自己构造中转注入页面:伪静态技术原理都很简单,就是把原来的 index.php?id=1 这种形式的URL给替换成其它形式   先说实现方法: inj.php: 复制代码 代码如下: <?php set_time_limit(10); $id=$_GET["id"]; $id=str_replace(" ","%20",$id); $id=str_replace("=","%3D&qu

交换机的工作原理详细介绍

交换机的工作原理: 交换机根据收到数据帧中的源MAC地址建立该地址同交换机端口的映射,并将其写入MAC地址表中. 交换机将数据帧中的目的MAC地址同已建立的MAC地址表进行比较,以决定由哪个端口进行转发. 如数据帧中的目的MAC地址不在MAC地址表中,则向所有端口转发.这一过程称之为泛洪(flood). 广播帧和组播帧向所有的端口转发. 交换机的三个主要功能: 学习:以太网交换机了解每一端口相连设备的MAC地址,并将地址同相应的端口映射起来存放在交换机缓存中的MAC地址表中. 转发/过滤:当一个

IsPostBack原理的介绍_实用技巧

IsPostback的原理-------------------------------------------------------------------------------- 一步一步让你看明白.. 先说说吧,然后在上代码.ispostback:就是判断页面是首次加载的,还是数据回发(有get或者post请求过的)后的页面.上代码吧,直观点. -----------------------------------------------------------------------

PHP 伪静态技术原理以及突破原理实现介绍_php技巧

先说实现方法: inj.php: 复制代码 代码如下: <?php set_time_limit(10); $id=$_GET["id"]; $id=str_replace(" ","%20",$id); $id=str_replace("=","%3D",$id); $url="http://www.xxx.com/index.php/library/more/id/$id.html&qu