<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 400px;
height: 400px;
background:yellow;
padding:50px;
margin: 10px;
border: 10px solid pink;
position: absolute;
left: 100px

}
#div2{
width: 200px;
height: 200px;
background:yellow;
padding:50px;
margin: 10px;
border: 10px solid pink;
position: absolute;
left: 100px
}
#div3{
width: 150px;
height: 150px;
background:yellow;
padding:50px;
margin: 20px;
border: 20px solid pink;
position: absolute;
left: 100px
}

</style>
<script type="text/javascript">
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
// alert(aDiv[2].clientLeft)
// alert(aDiv[1].clientLeft)
// offsetWidth=aDiv[0].style.width + border + padding的总长度 borer及其之内的长度
// offsetLeft=aDiv[1]的左边框(不包含边框)到 aDiv[0]（）的左内边框的距离，也就是 aDiv[0]的margin + position的left值
// aDiv[2].clientLeft就是aDiv[2]的左边框border的宽度
// clientwidth:用于描述元素内尺寸宽度，是指 元素内容+内边距 大小，不包括边框、外边距、滚动条部分 clientwidth：本身宽度（200）+内边距(10*2)=220; 就是指 width+padding;
//
// scrollwidth：内容区域尺寸加上内边距加上溢出尺寸

}
</script>
</head>
<body>
https://www.cnblogs.com/panjun-Donet/articles/1294033.html
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
<div id="div5"></div>
</div>
</div>
</div>
</div>
<div id="divParent" style="padding: 8px; background-color: #aaa; height:200px; width:300px; overflow:auto;position:absolute;left:800px" >
<div id="divChild" style="background-color: #0f0;height: 400px; width: 500px; border: solid 10px #f00;">
</div>
</div>
scrollwidth=子div的宽度(500)+子div的边框(10*2)+父容器的padding（8）=528

scrollheight=子div的高度(400)+子div的边框(10*2)+父容器的padding（8）=428

现在我们验证一下

我们发现在 ie8及之后的 浏览器 为428，firework 也为428；而 chrome Safari opera 都为436；

因此我们可以猜测 chrome和 Safari、opera 在计算 scrollheight时，加上了 父容器的下 padding(8) 即 428+8=436；
scrollTop是指某个可滚动区块向下滚动的距离，比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10
如果一个元素不能被滚动，它的scrollTop将被设置为0。

设置scrollTop的值小于0，scrollTop 被设为0。

如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值
<script type="text/javascript">
var divParent= document.getElementById("divParent");
var scrollwidth = divParent.scrollWidth;
var scrollheight = divParent.scrollHeight;
var scrolltop = divParent.scrollTop;
var scrollleft = divParent.scrollLeft;
divChild.innerHTML += ‘clientWidth: ‘ + scrollwidth + ‘<br />‘;
divChild.innerHTML += ‘clientHeight: ‘ + scrollheight + ‘<br />‘;
</script>
</body>
</html>

style.left offsetLeft offsetwidth clientLeft clientWidth scrollLeft scrollWidth的更多相关文章

  1. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  2. 元素间距属性（scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin）

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

  3. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  4. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...

  5. HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

  6. H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...

  7. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth具体指完全解释究竟哪里的距离scrollHeight: 获取对象的高度滚动. scrollLe ...

  8. 转 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  9. scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动（冻结）的效果

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位 ...

随机推荐

  1. oracle初级语法

    --select关键字第一个句型: select emp.ename,emp.sal from emp; --from 关键字后面跟 需要查询表名: select ename from emp; -- ...

  2. Sessions Hang on row cache lock

    Sessions Hang on "row cache lock" (dc_objects) While Creating & Dropping a Table Concu ...

  3. wpf 获取Image的图片并保存到本地

    XMAL代码如下: <Image Name="ImageToSave" Source="Images/pic_bg.png" Grid.RowSpan=& ...

  4. Linux 部署 xxl-job 注意问题

    问题:Failed to create parent directories for [/data/applogs/xxl-job/xxl-job-admin.log][原因:权限不足] 启动终端: ...

  5. mysql自动更新时间

    ALTER TABLE sys_user MODIFY COLUMN update_time TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDAT ...

  6. 汇编-13.0-int指令

    1.int指令 int指令的格式为:int n,n为中断类型码,它的功能是引发中断过程. 执行int n指令,相当于引发一个中断号为n的中断过程. (1).取中断类型码n: (2).标志寄存器入栈,I ...

  7. UISplitViewController使用

    分割控制器UISplitViewController <1>功能:它也是ipad的一个新特性,在屏幕上可以同时显示两个控制器,左边一个,右边一个:左边的为主控制器,右边的为详细控制器,主控 ...

  8. mvc framework ui component understand.

    mvc: .htm是v,   context和contex中的contextNode 是m,  view controller, custom controller ,component contro ...

  9. 【Docker】-NO.131.Docker.1 -【Docker】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  10. Docker容器中安装vim

    我在docker中安装了jexus.使用vim编辑default配置文件的时候提示 vim: command not found 原因是docker中没有安装vim命令 如果你直接输入  apt-ge ...