三大家族：scroll家族，offset家族，client家族

1.1、页面滚动事件-获取位置

scrollLeft 和 scrollTop （属性）

• 获取被卷去的大小
• 获取元素内容往左、往上滚出去看不到的距离
• 这两个值是可读写的（可以读取，也可以修改（赋值））
•  尽量在 scroll 事件里面获取被卷去的距离

 

 div.addEventListener('scroll', function () {
          console.log(this.scrollTop)
        })

• document.documentElement 

 // 页面滚动事件
    Windows.addEventListener('scroll', function () {
    // document.documentElement 是HTML 元素获取方式
    const n = document.documentElement.scrollTop //检测页面滚动的头部距离（被卷去的头部）
    console.log(n)
        })

1.2、页面滚动事件-滚动到指定的坐标 

• scrollTo() 方法可把内容滚动到指定的坐标
•  语法：元素.scrollTo(x, y)

 

  // 让页面滚动到页面y轴 1000像素的位置
        window.scrollTo(0, 1000)

2、元素尺寸于位置-尺寸 

•  获取宽高：

1.  获取元素的自身宽高、包含元素自身设置的宽高、padding、border
2.  offsetWidth 和 offsetHeight（内容 + padding + border）
3.  获取出来的是数值,方便计算
4.  注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

• 获取位置：

1.  获取元素距离自己定位父级元素的左、上距离
2.  offsetLeft 和 offsetTop 注意是只读属性

   

 3、页面尺寸事件-获取元素宽高

• 获取宽高：

1.  获取元素的可见部分宽高（不包含边框，margin，滚动条等）
2.  clientWidth 和 clientHeight

   

• 分析 flexible.js 源码 ：

    // 声明一个计算字号的函数
      const setFontSize = function () {
        // 获取 html 元素
        const html = document.documentElement
        // 获取 html 元素的宽度
       const clientWidth = html.clientWidth
       // html 根字号设置：当前页面宽度（html元素）/ 10 划分为10等份
       html.style.fontSize = clientWidth / 10 + 'px' 
      }
      // 页面加载先调用执行一次
      setFontSize()
      // 若页面尺寸发生变化，则重新执行函数，重新计算
      window.addEventListener('resize', setFontSize)