37.JS盒子模型属性及应用

返回顶部：

   监听浏览器的滚动条滚动，只要滚动条滚动了，事件一定触发
     + 鼠标滚轮
     + 拖动滚动条滚动
     + 按方向键
     + JS中基于代码控制
 ...
 在滚动条滚动的过程中，此事件触发的频率非常的高 (浏览器最快反应时间内就会触发 例如：谷歌4~6ms)
let box = document.querySelector('.box')
window.onscroll = function() {

   检测当前卷去的高度是否超过一屏幕来决定link的显示与隐藏
  let A = document.documentElement.scrollTop,
    B = document.documentElement.clientHeight;

  box.style.display = A >= B ? 'block' : 'none'
  console.log('ok');
}

 点击按钮回到顶部
box.onclick = function() {
  document.documentElement.scrollTop = 0
}

client+offset+scroll

let box = document.querySelector('.box')

JS盒子模型: 基于一系列的属性可以获取到盒子的一些样式("组合样式") +
  没必要在基于getComputedStyle获取每一部分的样式自己去计算了， 对于获取某些样式来讲比较快捷的 +
  获取的结果直接不带单位， 属于纯数字， 可以直接进行数学运算了 +
  获取的结果是一个整数， 这样会存在1px以内的误差

[client系列] +
clientWidth: 可视区域的宽度(内容的宽度 + 左右的padding +
    clientHeight： 可视区域的高度 +
    clientTop: 上边框的高度 +
    clientLeft: 左边框的宽度 如果盒子设定了固定的高度， 内容超过这个设定的高度（ 内容溢出）, 
    不论是否设置溢出隐藏(overflow: hidden),获取的结果是不变的， 还是根据设置的高度来决定

    document.documentElement.clientWidth / clientHeight: 获取当前页面可视区域(一屏幕) 
    的宽高或者是浏览器 窗口的宽高 - >在部分低版本浏览器中不兼容， 需要基于
    document.body.clientWidth / clientHeight来获取,
    所以代码经常这样写
    let winH = document.documentElement.clientHeight || document.body

[offset系列] 
    + offsetWidth: 在clientWidth的基础上加上左右的边框(一般用来获取盒子真实的大小) 
    + offsetHeight： 在clientHeight的基础上加上上下的边框 
    + offsetParent: 获取当前元素的父参照物(不一定是他的父元素)
    + offsetLeft: 获取当前元素距离其父参照物的做偏移
    + offsetTop： 获取当前元素距离其父参照物的上偏移

[scroll系列] 
    + scrollWidth: 在内容没有溢出的情况下， 和clientWidth是相同的， 但是在有内容溢出的情况下， 
获取 结果是真实内容的宽度(包括溢出的内容) + 左padding(一般应用于在有内容溢出的情况下，
获取真实的大小)
    + scrollHeight: 在内容没有溢出的情况下， 和clientHeight是相同的， 但是在有内容溢出的情况下， 
获取 结果是真实内容的宽度(包括溢出的内容) + 上padding获取的结果是一个约等于的值:在不同浏览器
或者是否设置overflow:hidden的情况下,获取的结果都是不同的
let trueH = document.documentElement.scrollHeight || document.body.scrollHeight;获取
页面真实的高度(包含其他屏幕的内容)
    + scrollTop: 滚动条卷去的高度
    + scrollLeft：滚动条卷去的宽度
    最小值:0  
    最大值: 页面真实的宽高(scrollWidth/scrollHeight) -- 屏幕的宽高(clientWidth/clientHeight)
    =>13个属性中，只有 scrollTop/screenLeft 是可读写的属性，其余都是只读属性 (只读: 只能获取不能
        设置值)

 默认情况下，所有元素都在同一个平面中(文档流中)，所以所有元素的父参照物都是body
 box.offsetParent ->body
 box.offsetParent ->body
 =>所有元素的offsetLeft/offsetTop左偏移和上偏移也都是盒子本身外边框开始距离body的距离
 
 box.style.position = 'relative';
 这个盒子形成一个全新的平面，其内部的所有后台元素的"父参照物"就是它了，同理设置：absolute/fixed
 也有相同的效果，可以改变元素的父参照物 
 outer.offsetParent ->body
 box.offsetParent ->body 
 
 // 需求: 编写一个offset方法， 获取当前元素距离body的左(上)偏移，不论其父参照物是谁
 function offset(element){
    let l = element.offsetLeft,
        t = element.offsetTop,
        p = element.offsetParent
    
    while(p && p.tagName !== 'body'){
        // 在标准的IE8浏览器中，获取的偏移值本身计算了参照物盒子的边框，所以没必要我们自己处加边框
        if(!/MSIE 8/.test(navigator.userAgent)){
            l += p.clientLeft 
            t += p.clientTop
        }
        l += p.clientLeft 
        t += p.clientTop
        p = p.offsetParent
    }

    return {
        top:0,
        left:l
    }
 }

// getBoundingClientRect: 获取当前盒子与浏览器"可视化窗口位置"的信息
//  box.getBoundingClientRect()
// =>对象: width/height/top/left/right/bottom
// bottom/right都是距离上边及左边的距离
// 获取的结果可能是负数
// ........