元素可视区client 元素滚动scroll

目录

一、元素可视区client

1、client概述

2、获取client代码

二、元素滚动scroll

1、scroll概述

2、固定侧边栏

 三、三大系列总结

1、三大系列大小对比

2、主要用法

---

一、元素可视区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 获