<!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. nginx break-circus

    upstream : read-timeout,connection-timeout,分级别 500ms,1S,100S,长链接 ---颗粒度[每个服务api health-check]--- --- ...

  2. 转：彻底搞清楚javascript中的require、import和export

    原文地址:彻底搞清楚javascript中的require.import和export   为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Ja ...

  3. vue框架与koa2服务器实现跨域通信

    首先我们在vue中引入axios, npm install axios --save 在需要用到的页面引入axios import axios from "axios"; 用axi ...

  4. org.hibernate.HibernateException: Duplicate identifier in table for: Waa

    提示表的标识符重复,发现是数据库中的主键id重复了.因为是序列自动生成的. 我原本以为是因为我的序列的问题,序列.nextval()有问题,但是当我在数据库测试时,发现当前序列没有问题.但是当数据插入 ...

  5. 11.全局变量（static）

    1.数组 数组名是常量 2. 指针数组 4.局部变量 (1).作用域 作用的范围: (2).普通局部变量 在{}内定义: 只有执行到定义变量的这个语句,系统才会给这个变量分配空间. 当离开{},这个非 ...

  6. HSRP(Hot Standby Router Protocol)

    一.简介       HSRP(Hot Standby Router Protocol 热备份路由器协议)是Cisco的专有协议.HSRP把多台路由器组成一个“热备份组”,形成一个虚拟路由器.这个组内 ...

  7. Python3学习之路~7.3 反射

    python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr,该四个函数分别用于对对象内部执行:检查是否含有某成员.获取成员.设置成员.删除成员. ...

  8. vue js实现获取两个日期之间所有日期

    https://blog.csdn.net/m0_37852904/article/details/85790793 // 计算续住的总日期列表 getAll(begin, end) { let ar ...

  9. LeetCode 15 输入无序、有重复，输出排重版 3-Sum

    V1 粗暴的遍历,时间复杂度O(N³) func threeSumClosest(nums []int, target int) int { min := 0 result := 0 for i := ...

  10. python之进程，线程，协程简单理解

    进程:资源单位,由操作系统控制调度.正在执行的一个程序或者过程,进程之间不共享资源,进程间通讯手段:管道,队列,信号量等.多用于计算密集型场景,如金融计算 线程:是cpu的最小执行单位,由操作系统控制 ...