1、偏移量offset
offset是偏移、位移、补偿的意思（取整数值四舍五入），表示元素的偏移量。
html和css代码
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
border:0;
list-style:none;
}
div{
width:300px;
height:300px;
border:1pxsolid#000;
margin:100px;
position:relative;
}
span{
width:100px;
height:100px;
border:1pxsolid#000;
position:absolute;
left:120px;
top:30px;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
JavaScript代码
varoBox=document.getElementsByTagName('div')[0];
console.log(oBox.offsetLeft);// 到文档左侧的距离
console.log(oBox.offsetTop);// 到文档顶部的距离
console.log(oBox.offsetWidth);// 获取盒子的实际占位宽度(border contentWidth padding)
console.log(oBox.offsetHeight);// 获取盒子的实际占位高度(border contentHeight padding)
console.log("-------------------------------------");
varspanTag=document.getElementsByTagName('span')[0];
console.log(spanTag.offsetLeft);// 到父盒子左侧的距离(前提是父盒子有定位，没定位则直接索引到body)
console.log(spanTag.offsetTop);// 到父盒子顶部的距离(前提是父盒子有定位，没定位则直接索引到body)
console.log(spanTag.offsetWidth);// 获取span的实际占位宽度(border contentWidth padding)
console.log(spanTag.offsetHeight);// 获取span的实际占位高度(border contentHeight padding)
console.log(spanTag.offsetParent);// 相对父级元素（默认指向body）
2、滚动scroll
scroll是长卷纸，卷轴的意思，表示浏览器滚动时元素的卷曲值。
html和css代码
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin:0;
}
#box{
width:200px;
height:200px;
overflow:auto;
}
#content{
width:300px;
height:300px;
background:#ccf;
border:1pxsolid#000;
padding:2px;
}
</style>
</head>
<body>
<divid="box">
<divid="content">
<p>客户：“这个图下班之前必须发给我！” 设计师：“好的！”
第二天清早。客户：“图怎么还没发过来？” 设计师：“我还没下班呢…”。
客户：“这个图下班之前必须发给我！” 设计师：“好的！”
第三天清早。客户：“图怎么还没发过来？” 设计师：“我还没下班呢…”</p>
</div>
</div>
<buttonid="btn">按钮</button>
</body>
</html>
JavaScript代码
varoBox=document.getElementById('box');
varoContent=document.getElementById('content');
varoBtn=document.getElementById("btn")
console.log(oContent.scrollWidth);// 内容盒子的可滚动宽度
console.log(oContent.scrollHeight);// 内容盒子的可滚动高度
console.log(oBox.scrollWidth);// 限定了宽高的父盒子中，其内容盒子可滚动的宽度
console.log(oBox.scrollHeight);// 限定了宽高的父盒子中，其内容盒子可滚动的高度
oBtn.onclick=function() {
console.log("-------------------------");
console.log(oBox.scrollTop);// 获取内容盒子相对于父盒子已经滚动了多少高度
console.log(oBox.scrollLeft);// 获取内容盒子相对于父盒子已经滚动了多少宽度
}
3、客户区client
client获取的是元素的可视区域
案例：吸顶导航
html和css代码
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>吸顶导航</title>
<style>
* {
margin:0;
padding:0;
}
div{
width:100%;
height:100px;
line-height:100px;
text-align:center;
background:skyblue;
}
</style>
</head>
<body>
<section>
<p>段落</p>
...
<p>段落</p>
<divid="box">吸顶导航</div>
<p>段落</p>
...
<p>段落</p>
</section>
</body>
</html>
JavaScript代码
// 获取盒子的Y坐标
varboxTop=box.offsetTop;
console.log(boxTop);
// scroll 滚动事件
window.onscroll=function() {
// 获取文档滚出的距离
varwinTop=document.documentElement.scrollTop;
console.log(winTop);
// 每当滚动的时候都需要获取超出窗口的范围 然后和盒子Y坐标做对比
// 如果滚动距离大于等于盒子Y坐标，就设置成固定定位，否则去掉盒子定位
if(winTop>=boxTop) {
box.style.position="fixed";
box.style.top=0;
}else{
box.style.position="static";
}
}
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved
