JS基础回顾_滚动条

// log
function getScrollOffset() {
  if (window.pageXOffset) {
    return {
      x: window.pageXOffset,
      y: window.pageYOffset,
    }
  } else {
    return {
      x: document.body.scrollLeft + document.documentElement.scrollLeft,
      y: document.body.scrollTop + document.documentElement.scrollTop,
    }
  }
}
console.log(getScrollOffset())

// log
// 1440 为标准宽度
console.log(window.innerWidth)

元素的大小

<!-- log -->
<div id="box" style="width:100px;height:100px;background:red;"></div>

// log
let box = document.getElementById('box')
console.log(box.getBoundingClientRect()) // 不常用
console.log(box.offsetWidth)
console.log(box.offsetHeight)
console.log(box.offsetLeft)
console.log(box.offsetTop)
console.log(box.offsetParent)

对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的目标。