目录
一、元素可视区client
1、client概述
client
翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过
client 系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。
属性 | 说明 |
---|---|
clientLeft | 返回元素左边框的大小 |
clientTop | 返回元素上边框的大小 |
clientWidth | 返回自身的宽度(包含padding),内容区域的宽度(不含边框)。注意返回数值不带单位 |
clientHeight | 返回自身的高度(包含padding),内容区域的高度(不含边框)。注意返回数值不带单位 |
2、获取client代码
//获取元素client宽高
<div>我是内容...</div>
<style>...(省略了样式代码)</style>
<script>
var div = document.querySelector('div');
console.log(div.clientHeight);console.log(div.clientTop);
console.log(div.clientLeft);
</script>
二、元素滚动scroll
1、scroll概述
scroll含义:scroll的含义是滚动,使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。
属性 | 说明 |
---|---|
scrollLeft | 返回被卷去的左侧距离,返回数值不带单位 |
scrollTop | 返回被卷去的上方距离,返回数值不带单位 |
scrollWidth | 返回自身的宽度,不含边框。注意返回数值不带单位 |
scrollHeight | 返回自身的高度,不含边框。注意返回数值不带单位 |
2、固定侧边栏
案例分析 :
//HTML结构代码
<div class="header w">头部区域</div>
<div class="banner w">banner 区域</div>
<div class="main w">主体区域</div>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
//js功能代码
//1.获取元素
var header = document.querySelector('.header');
var banner = document.querySelector('.banner');
var slider = document.querySelector('.slider-bar');
var goBack = document.querySelector('.goBack');
//2.给goback注册click事件
goBack.addEventListener('click',function(){
window.scroll(0,0)
})
//3.给整个页面绑定scrool事件
document.addEventListener('scroll',function(){
//3.1获取页面顶部和左侧卷起的距离
slider.style.top=window.pageYOffset;
if(window.pageYOffset>(header.scrollHeight+banner.scrollHeight+30)){
goBack.style.display = 'block';
slider.style.display='block';
slider.style.position='fixed';
slider.style.left='85%';
}
else{
slider.position='absolute';
slider.style.left='85%';
slider.style.top =( header.scrollHeight + banner.scrollHeight + 30)+'px';
goBack.style.display='none';
}
})
// css样式代码
<style>
.w {
width: 70%;
margin: 0 auto;
margin-top: 10px;
}
.header {
height: 100px;
background-color: orange;
}
.banner {
height: 100px;
background-color: paleturquoise;
}
.main {
height: 1267px;
background-color: rgb(68, 236, 132);
}
.slider-bar {
width: 70px;
height: 200px;
background-color: rgb(236, 236, 81);
position: absolute;
left: 85%;
top: 330px;
}
.goBack {
display: none;
position: absolute;
bottom: 0;
}
</style>
案例效果查看:刷新浏览器页面,当页面移动到主体部分时,浏览器预览效果。
三、三大系列总结
1、三大系列大小对比
三大系列大小对比 | 作用 |
---|---|
element.offsetWidth | 返回自身包括padding、边框、内容区的宽度,返回数值不带单位 |
element.clienttWidth | 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 |
element.scrollWidth | 返回自身的实际宽度、不含边框、返回数值不带单位 |
2、主要用法
1. offset系列 经常用于获得元素位置 offsetLeft offsetTop
2. client 经常用于获取元素大小 clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop scrollLeft
4. 注意页面滚动的距离通过 window.pageXOffset 获