offset

offsetTop/offsetLeft

返回距离上级盒子（最近的带有定位）左边的位置,如果没有父亲或者父亲没有定位则以 body 为准

图一：父盒子没有开启定位

图二：父盒子开启定位

offsetWidth/offsetHeight

偏移量 = padding + border +width（height）

案例

计算鼠标在盒子中的位置

参考代码

1.首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
2.其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
3.用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标

拖拽

参考代码

过程：鼠标在移动的过程中不断将最新的值赋值为盒子
先获取鼠标按下时距离盒子的距离x，y【鼠标与盒子的位置x，y是不会发生变化的，只是盒子的位置与页面发生变化】，鼠标按下之后需要在里面绑定鼠标移动和鼠标抬起事件
给title绑定事件，login需要开启定位才能计算鼠标距离盒子的距离

放大镜

参考视频
参考代码

思路：

1. 鼠标移入box区域内mask显示和隐藏；
2. 计算鼠标在box的坐标x,y；

var x = e.pageX - this.offsetLeft
var y = e.pageY - this.offsetTop;

3. 调整mask中鼠标的位置位于中心，即将鼠标的值x,y减去mask高度和宽度的一半然后赋值给mask，maskX代表mask在box的左侧距离，maskY代表mask在box的上方距离

var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;

4. 判断临界值，mask不能在box外移动
   移动最小值： 0
   移动最大值：box.offsetWidth（offsetHeight） - mask.offsetWidth（offsetHeight）
   

因为box和mask是正方形：box.offsetWidth - mask.offsetWidth = box.offsetHeight - mask.offsetHeight
所以将这两个值设置一个即可：maskMax = preview_img.offsetWidth - mask.offsetWidth

要设置left和top必须开启定位

if (maskX <= 0) {
    maskX = 0;
} else if (maskX >= maskMax ) { // maskMax = box.offsetWidth - mask.offsetWidth
    maskX = maskMax;
}
if (maskY <= 0) {
    maskY = 0;
} else if (maskY >= maskMax) { //maskMax = box.offsetHeight - mask.offsetHeight
    maskY = maskMax;
}
mask.style.left = maskX + ‘px‘;
mask.style.top = maskY + ‘px‘;

5. 按比例移动大图
   

计算大图移动距离 => 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
遮挡层移动距离：maskX
大图片最大移动距离(大图比大盒子大)：bigIMg.offsetWidth - big_box.offsetWidth
遮挡层的最大移动距离：maskMax

// 大图片的移动距离 X Y
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;

6. mask向左移动，而bigImg需要向右移动,设置的值应为负数,

要设置left和top必须开启定位

bigIMg.style.left = -bigX + ‘px‘;
bigIMg.style.top = -bigY + ‘px‘;

client

与offset区别【偏移量不包含border】
偏移量clientWidth = padding + width（height）

scroll

scrollHeight：内容的高度【不包含边框border】
scrollTop：被卷去的内容高度

scroll滚动事件当我们滚动条发生变化会触发的事件

注：元素被卷去的高度：scrollTop；页面被卷去的高度：pageYOffset
pageYOffset存在兼容性写法
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

参考代码

案例

淘宝右侧导航条

参考代码

实现思路：

1. 当 window.pageYOffset >= bannerTop 时，右侧的slidebar变为固定定位,同时需要获取slidebar距离顶部的距离sliderbarTop = sliderbar.offsetTop - bannerTop,修改slidebar的top值【要开启定位才能设置top】
2. 当 window.pageYOffset >= mainTop 时，出现 backTop 返回

效果图

三大家族区别

三大家族主要用法

offset：用于获取元素位置 offsetLeft offsetTop
client：用于获取元素大小 clientWidth clientHeight
scroll：用于获取滚动距离 scrollTop scrollLeft

页面滚动高度 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

三大家族案例

原文：https://www.cnblogs.com/yx1102/p/12899870.html