2018-05-02 scroll client offset
2018-05-02 本文已影响1人
wuliduoduo
滚动条是内嵌的
1.scrollWidth/scrollHeight
有滚动条：scrollWidth，scrollHeight=里内容+内容边框2+内边距（有滚动条 padding-bottom消失了）
兼容性可能有些浏览器没有考虑边框大小
没有滚动条：scrollWidth，scrollHeight=里内容+内边距2
scrollLeft //每个浏览器计算方法不一样 滚动的长度
scrollTop
2.offsetWidth/offsetHeight
有滚动条：offsetWidth，offsetHeight=外内容+外内容边框2+外内边距2
没有滚动条：offsetWidth,offsetHeight=外内容+外内容边框2+外内边距2
有就是有没有滚动条都一样都是自身宽高
offsetLeft 对象的左边框 //left+margin
offsetTop 对象的上边框 //相对于父元素的偏移量，margin left top都能影响到 系统默认的margin，padding也能影响到
3.clientWidth/clientHeight
有滚动条：clientWidth，clientHeight=内容+内边距2（有文字就知道两个内边距都有）-scrollbarWidth/scrollbarHeight(默认17)
没有滚动条：clientWidth,clientHeight=外内容（height/width）+外内边距2（padding）
有就是有没有滚动条都一样都是自身宽高
clientLeft 对象的左边框
clientTop 对象的上边框
obj.style.width/obj.style.height/obj.style.top/obj.style.left
必须是有内联样式，没有值都没有
<div id='external' style="height:500px;width:600px;top:700px;left:800px">
<div id='inner'>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0; //影响offsetTop、offsetHeight
}
#external{
width: 300px;
height: 300px;
border: 5px solid blue;
background: pink;
position: relative;
left: 10px;
top: 20px;
padding: 40px;
margin: 30px;
overflow: auto;
}
#inner{
width: 500px;
height: 500px;
border: 4px solid red;
background: yellow;
}
</style>
</head>
<body>
<div id='external'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo at eos sapiente optio eligendi perferendis. Provident nam quo quas impedit iste, corrupti dolorem incidunt nisi. Delectus dolore voluptates, mollitia quibusdam?
<div id='inner'>
</div>
</div>
<button onclick="scrollbar()">scroll</button>
<script>
window.onload=function(){
var external=document.getElementById("external");
console.log("宽"+external.scrollWidth+"高"+external.scrollHeight);
console.log("宽"+external.offsetWidth+"高"+external.offsetHeight);
console.log("宽"+external.scrollLeft+"高"+external.scrollTop);
console.log("宽"+external.clientWidth+"高"+external.clientHeight);
console.log("宽"+external.clientLeft+"高"+external.clientTop);
}
function scrollbar(){
var external=document.getElementById("external");
console.log("宽"+external.scrollWidth+"高"+external.scrollHeight);
console.log("宽"+external.scrollLeft+"高"+external.scrollTop);
}
</script>
</body>
</html>
