知识库

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, body {
      height: 500%;
      /* background: -webkit-linear-gradient(sky); */
    }

    #link {
      width: 100px;
      height: 100px;
      background: orange;
      position: fixed;
      right: 20px;
      bottom: 150px;
      display: none;
    }

    #box {
      width: 100px;
      height: 100px;
      background: orange;
    }
  </style>
</head>
<body>
  <!-- 
    JS盒子模型: 基于一系列属性可以获取到盒子的一些样式
      1.没必要再基于getComputedStyle获取每一部分的样式自己去计算,对于获取某些样式比较方便
      2.获取的结果直接不带单位,是纯数字,可以直接进行数学运算
      3.获取的结果是一个整数.这样会存在1px以内的误差

    client系列
      clientWidth/Height 内容的宽/高 + padding
        如果盒子设置了固定高度,内容溢出,无论是否设置overflow: hidden,结果都是不变的,
        由原来设置的高度来决定
        document.documentElement.clientWidth/Height 当前页面可视区(浏览器窗口)的宽/高
         => 首屏宽/高
        在部分低版本浏览器不兼容,需要基于document.body.clientWidth/Height
        document.documentElement.clientWidth || document.body.clientWidth/Height

      clientLeft/Top 盒子左/上边框的大小
      
    offset系列 内容的宽/高 + padding + border
       offsetWidth/Height 如果没有边框,结果和clientWidth/Height一样,一般用来获取盒子真实大小
       offsetLeft/Top 获取当前元素外边框距离其父参照物内边框的左/上偏移
       offsetParent 获取当前元素的父参照物(不一定是它的父元素) 默认情况下所有文素都在
       同一平面(文档流)中,所以所有元素的父参照物都是body
        outer.position = 'relative/fixed/absolute' 形成一个全新的全面(文档流),outer
        里面的元素父参照物变为outer

    scroll系列
      scrollWidth/Height 
        内容没有溢出的情况下,结果和clientWidth/Height相同
        内容溢出的情况下,结果是内容的宽/高(包含溢出内容) + 左/上padding,应用于在有内容
        溢出情况下获取盒子真实大小
        获取的结果是约等于的值,在不同浏览器或者是否设置overflow: hidden的情况下,获取结果都是不同的
        document.documentElement.scrollHeight || document.body.scrollHeight 用于
        获取页面真实高度,包括其他内容(第一屏到最后一屏)
      scrollLeft/Top 滚动条卷去的宽/高
        最小值: 0
        最大值: 页面真实宽高(scrollWidth/Height) - 屏幕宽高(clientWidth/Height) 滚动到底部了

    getBoundingClientRect 获取当前盒子与浏览器"可视化窗口位置"的信息
      top: 元素顶部和视口顶部的距离
      left: 元素坐部和视口左部的距离
      right: 元素右部和视口左部的距离
      bottom: 元素底部和视口顶部的距离

      box.getBoundingClientRect()

    只有scrollLeft/Top是可读写属性,其余都是只读属性
      回到顶部 document.documentElement.scrollTop = 0
   -->

  <div id="link"></div>
  <div id="box"></div>

  <script>
    console.log(box.offsetLeft)

    link.onclick = function () {
      document.documentElement.scrollTop = 0
    }

    // 鼠标滚轮/拖动滚动条/方向键/js代码控制都会触发滚动事件
    window.onscroll = function () {
      let curH = document.documentElement.scrollTop,
        screenH = document.documentElement.clientHeight

      link.style.display = curH > screenH ? 'block' : 'none'
    }
    
  </script>
</body>
</html>