页面滚动时判断元素是否在可视区域内

/**
 * @description: 判断dom元素是否在可视区域内
 * @param: el: Vuecomponnet对象
 * @returns: true-在可视区域，false: 不在可视区域
 */
export const isElementInViewport = function(el) {
  let s = el.$el.offsetTop    // 元素相对于页面顶部的距离
  let x = el.$el.offsetHeight    //元素自身高度   
  let t = window.pageYOffset  // 页面在垂直方向上滚动的距离
  let y = window.innerHeight   //窗口可视区域的高度
  let isHidden = (s+x) < t || (s > (t+y))
  return !isHidden
};



/**
 * @description: 函数节流，即一定时间内，函数只能执行一次
 * @param: fn：要执行的函数
 * @param：wait：要间隔的时间差，（单位：毫秒）
 */
export const throttle = function (fn, wait:number=500) {
  let timer:any = null; // 定时器
  let firstTime:Boolean = true;
  return function () {
    let args = Array.prototype.slice.call(arguments, 0);
    // 如果是第一次执行的话，需要立即执行该函数
    if (firstTime) {
      fn(args);
      firstTime = false;
    }
    // 如果当前有正在等待执行的函数则直接返回
    if (timer) return;
    // 开启一个倒计时定时器
    timer = setTimeout(function () {
      fn(args);
      // 清除之前的定时器
      timer = null;
    }, wait);
  };
}

ele.offsetTop / offsetLeft：当前对象到其上级层顶部的距离.

ele.offsetWidth / offsetHeight: 返回元素自身的 宽度 / 高度，即标准盒子模型下：height + padding + border

window.pageXOffset / window.pageYOffset: 返回文档相对于窗口左上角水平和垂直方向滚动的像素。相等于scrollX / scrollY;

window.innerWidth / window.innerHeight: 获取可视窗口的宽度/高度（不包含工具条与滚动条）