WebAPI之三大系列（offset、client和scroll）

清疚 2023-02-13 03:58 15阅读 0赞

### WebAPI之三大系列（offset、client和scroll） ###

*  WebAPI之三大系列（offset、client和scroll）
 *   *  1. 元素偏移量 offset 系列
     *   *  1.1 offset介绍与相应属性
         *  1.2 offset 与 style 区别
         *  1.3 案例：计算鼠标在盒子内的坐标
     *  2. 元素可视区 client 系列
     *   *  2.1 client介绍与相应属性
         *  2.2 立即执行函数
     *  3. 元素滚动 scroll 系列
     *   *  3.1 scroll介绍与相应属性
         *  3.2 案例：仿淘宝固定右侧侧边栏
         *  3.3 页面被卷去的头部兼容性解决方案
         *  3.4 mouseenter 和mouseover的区别
     *  4. 三大系列总结

# WebAPI之三大系列（offset、client和scroll） #

## 1. 元素偏移量 offset 系列 ##

### 1.1 offset介绍与相应属性 ###

我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。  
offset属性如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
代码如下：

<div class="father">
            <div class="son"></div>
        </div>
        <div class="w"></div>
        <script> // offset 系列 var father = document.querySelector('.father'); var son = document.querySelector('.son'); // 1.可以得到元素的偏移 位置 返回的不带单位的数值 console.log(father.offsetTop); console.log(father.offsetLeft); // 它以带有定位的父亲为准 如果么有父亲或者父亲没有定位 则以 body 为准 console.log(son.offsetLeft); var w = document.querySelector('.w'); // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width console.log(w.offsetWidth); console.log(w.offsetHeight); // 3. 返回带有定位的父亲 否则返回的是body console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位 </script>

### 1.2 offset 与 style 区别 ###

1.offset特点：

*  offset 可以得到任意样式表中的样式值
 *  offset 系列获得的数值是没有单位的
 *  offsetWidth 包含padding+border+width
 *  offsetWidth 等属性是只读属性，只能获取不能赋值

2.style特点：

*  style 只能得到行内样式表中的样式值
 *  style.width 获得的是带有单位的字符串
 *  style.width 获得不包含padding和border 的值
 *  style.width 是可读写属性，可以获取也可以赋值

**总结：我们想要获取元素大小位置，用offset更合适；我们想要给元素更改值，则需要用style改变。**

### 1.3 案例：计算鼠标在盒子内的坐标 ###

<div class="box"></div>
        <script> // 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。 // 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY） // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop) // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标 var box = document.querySelector('.box'); box.addEventListener('mousemove', function(e) { // console.log(e.pageX); // console.log(e.pageY); // console.log(box.offsetLeft); var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; this.innerHTML = 'x坐标是' + x + ' y坐标是' + y; }) </script>

## 2. 元素可视区 client 系列 ##

我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

### 2.1 client介绍与相应属性 ###

client属性如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]

### 2.2 立即执行函数 ###

## 3. 元素滚动 scroll 系列 ##

### 3.1 scroll介绍与相应属性 ###

我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]

### 3.2 案例：仿淘宝固定右侧侧边栏 ###

//1. 获取元素
            var sliderbar = document.querySelector('.slider-bar');
            var banner = document.querySelector('.banner');
            // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
            var bannerTop = banner.offsetTop
                // 当我们侧边栏固定定位之后应该变化的数值
            var sliderbarTop = sliderbar.offsetTop - bannerTop;
            // 获取main 主体元素
            var main = document.querySelector('.main');
            var goBack = document.querySelector('.goBack');
            var mainTop = main.offsetTop;
            // 2. 页面滚动事件 scroll
            document.addEventListener('scroll', function() { 
                // console.log(11);
                // window.pageYOffset 页面被卷去的头部
                // console.log(window.pageYOffset);
                // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
                if (window.pageYOffset >= bannerTop) { 
                    sliderbar.style.position = 'fixed';
                    sliderbar.style.top = sliderbarTop + 'px';
                } else { 
                    sliderbar.style.position = 'absolute';
                    sliderbar.style.top = '300px';
                }
                // 4. 当我们页面滚动到main盒子，就显示 goback模块
                if (window.pageYOffset >= mainTop) { 
                    goBack.style.display = 'block';
                } else { 
                    goBack.style.display = 'none';
                }
    
            })

### 3.3 页面被卷去的头部兼容性解决方案 ###

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

1.  声明了 DTD，使用 document.documentElement.scrollTop
2.  未声明 DTD，使用 document.body.scrollTop
3.  新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持

function getScroll() { 
        return { 
          left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
          top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
        };
     } 
    使用的时候  getScroll().left

### 3.4 mouseenter 和mouseover的区别 ###

*  当鼠标移动到元素上时就会触发mouseenter 事件
 *  类似 mouseover，它们两者之间的差别是
 *  mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter  只会经过自身盒子触发
 *  之所以这样，就是因为mouseenter不会冒泡
 *  跟mouseenter搭配鼠标离开 mouseleave  同样不会冒泡

## 4. 三大系列总结 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]  
1.offset系列 经常用于获得元素位置 offsetLeft offsetTop

2.client经常用于获取元素大小 clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop scrollLeft

4.注意页面滚动的距离通过 window.pageXOffset 获得

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200527142300790.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200527202305597.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200528140604232.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200528140827762.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center