宽高和滚动

屏幕相关尺寸

console.log(window.screenTop) // 正负值，浏览器外壳左上角相对于屏幕左上角的距离高度，对移动端通常无意义
console.log(window.screenLeft) // 正负值，浏览器外壳左上角相对于屏幕左上角的距离宽度，对移动端通常无意义
console.log(window.screenY) // 同 window.screenTop
console.log(window.screenX) // 同 window.screenLeft

console.log(window.screen) // screen 对象，获取屏幕相关信息

浏览器和视口的宽高和滚动尺寸

console.log(window.outerHeight) // 浏览器包括外壳的高度
console.log(window.outerWidth) // 浏览器包括外壳的宽度
console.log(window.innerHeight) // 浏览器视口的高度(可用于渲染的高度)，包括滚动条
console.log(window.innerWidth) // 浏览器视口的宽度(可用于渲染的宽度)，包括滚动条
console.log(document.documentElement.clientHeight) // 就是 window.innerHeight 减去横向滚动条高度
console.log(document.documentElement.clientWidth) // 就是 window.innerWidth 减去纵向滚动条宽度

任意元素的宽高和滚动尺寸

const handleElementPosition = ele => {
  console.log(' ')
  // chrome 下滚动条宽度为 17 (px)
  console.log('ele.offsetHeight', ele.offsetHeight) // 元素没有被隐藏的高度， 包括border、滚动条、padding及以内的可见高度
  console.log('ele.clientHeight', ele.clientHeight) // 元素没有被隐藏的高度， 不包括 border和滚动条, 包括padding及以内的可见高度
  console.log('ele.scrollHeight', ele.scrollHeight) // 元素滚动高度，padding及以内总高度(包含不可见部分)，当无需滚动时，scrollHeight 等于 clientHeight
  console.log('ele.offsetTop', ele.offsetTop) // 当前元素border及以内区域的左上角相对于距离浏览器视口左上角的距离高度
  console.log('ele.clientTop', ele.clientTop) // 当前元素 padding左上角相对于当前元素border区域的左上角，实际就等于当前元素 border-top 宽度
  console.log('ele.scrollTop', ele.scrollTop) // 元素上部滚出可视区域的部分，也就是滚动条已经向下滚动的距离
}