BOM

查看与设置滚动条的滚动距离

IE9及以上

let x = window.pageXOffset; // 横向滚动距离
let y = window.pageYOffset; // 纵向滚动距离

IE8及以下

兼容性比较混乱，用时取两值相加，因为不可能存在两个同时有值

let x = document.body.scrollLeft + document.documentElement.scroolLeft; // 横向滚动距离
let y = document.body.scrolTop + document.documentElement.scroolTop; // 纵向滚动距离
// 简写
let x = document.body.scrollLeft | document.documentElement.scroolLeft; 
let y = document.body.scrolTop ｜ document.documentElement.scroolTop;

封装兼容性方法（求滚动轮滚动距离）

const getScrollOffset = () => {
  if (window.pageXOffset || window.pageYOffset) {
    return {
      x: window.pageXOffset,
      y: window.pageYOffset,
    };
  } else {
    return {
      x: document.body.scrollLeft + document.documentElement.scroolLeft,
      y: document.body.scrolTop + document.documentElement.scroolTop,
    };
  }
};
// 简写
const getScrollOffset = () => {
  let scrollLeft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
	let scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
  return {
    x: scrollLeft,
    y: scrollTop
  }
}

设置滚动

window.scrollTo(x, y)

let x = 0;
let y = 20;
window.scrollTo(x, y)

查看视口的尺寸

IE9及以上

let w = window.innerWidth; // 可视区域宽度
let h = window.innerHeight; // 可视区域高度

IE8及以下

// 标准模式下，任意浏览器都兼容（如何区分是否标准模式 document.compatMode == CSS1Compat，在.html头部有<!DOCTYPE html> 就是标准模式）
let w = document.documentElement.clientWidth; // 可视区域宽度
let h = document.documentElement.clientHeight; // 可视区域高度

怪异模式下的浏览器

document.body.clientWidth / document.body.clientHeight

封装兼容性方法，返回浏览器适口尺寸

const getViewportOffset = () => {
  if (window.innerHeight || window.innerWidth) {   // ie9 及以上
    return {
      w: window.innerWidth,
      h: window.innerHeight,
    };
  } else { // ie8及以下
    if (document.compatMode === "BackCompat") { // 怪异模式
      // 怪异模式
      return {
        w: document.body.clientWidth,
        y: document.body.clientHeight,
      };
    } else { // 标准模式
      return {
        w: document.documentElement.clientWidth,
        h: document.documentElement.clientHeight,
      };
    }
  }
};
// 简写
const getViewportOffset = () => {
  let clientWidth = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
  let clientHeight = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
  return {
    x: clientWidth,
    y: clientHeight
  }
}