1. 获取元素 在 浏览器窗口 中的 坐标
element.getBoundingClientRect()
// 获取元素的左，上，右和下分别相对 浏览器视窗 的位置
// left top right bottom
2.window视图位置属性
浏览器窗口尺寸 宽度和高度
console.log(window.innerHeight) // 939 仅仅包括滚筒条 console.log(window.outerHeight) // 1050 包括所有工具F12延展整个浏览器 console.log(window.innerWidth) // 809 仅仅包括滚筒条 console.log(window.outerWidth) // 1680 包括所有延展整个浏览器
兼容性处理
let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
3.window对象获取整个页面滚动的像素值
window.pageXOffset == window.scrollX; // 总是 true //返回文档在水平方向滚动的像素值 水平被卷进去的像素 window.pageYOffset == window.scrollY; // 总是 true
4window对象获取浏览器窗口在显示器中的位置
属性名 描述 备注
window.screenX 浏览器窗口在显示器中的水平位置 不支持的浏览器则是undefined
window.screenY 浏览器窗口在显示器中的垂直位置 不支持的浏览器则是undefined
window.screenLeft 浏览器可用空间左边距离屏幕（系统桌面）左边界的距离 不支持的浏览器则是undefined
window.screenTop 浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的距离 不支持的浏览器则是undefined
5.Screen对象视图属性：有关显示器（用户屏幕）信息的一些属性
属性名 描述 备注
window.screen.height 显示器屏幕的高度，包括工具栏、状态栏等。
window.screen.width 显示器屏幕的宽度，包括工具栏、状态栏等。
window.screen.availHeight 浏览器窗口在屏幕上可占用的高度。
window.screen.availWidth 浏览器窗口在屏幕上可占用的宽度。
window.screen.colorDepth 表示显示器的颜色深度。
window.screen.pixelDepth 该属性基本上与colorDepth一样。
一 元素视图位置属性
client家族：clientLeft、clientTop、clientWidth、clientHeight、height、widthoffset家族：offsetLeft、offsetTop、offsetWidth、offsetHeight、offsetParentscroll家族：scrollLeft、scrollTop、scrollWidth、scrollHeight
client家族
属性名 描述 备注
clientLeft 表示内容区域的左上角相对于整个元素左上角水平位置（包括边框和滚动条但是不包含元素的padding或margin） 单纯就是border宽度，返回该方向的border宽度。
clientTop 表示内容区域的左上角相对于整个元素左上角垂直位置（包括边框和滚动条但是不包含元素的padding或margin） 单纯就是border高度，返回该方向的border高度。
clientWidth 表示内容区域的宽度，包括padding大小，但是不包括边框和滚动条。
clientHeight 表示内容区域的高度，包括padding大小，但是不包括边框和滚动条。
height 表示内容区域的高度，不包括padding大小、边框和滚动条。
width 表示内容区域的高度，不包括padding大小、边框和滚动
offset家族
| 属性名 | 描述 | 备注 |
|---|---|---|
offsetLeft |
相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左偏移值 | |
offsetTop |
相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的上偏移值）。 | |
offsetWidth |
整个元素的宽度（包括边框）。 | |
offsetHeight |
整个元素的高度（包括边框）。 | |
offsetParent |
第一个祖定位元素 | offsetParent元素只可能是：<body>、position不是static的元素、<table>, <th> 或<td>，但必须要position: static |
scroll家族
| 属性名 | 描述 | 备注 |
|---|---|---|
scrollLeft |
表示元素滚动的宽度 | 可读可写 |
scrollTop |
表示元素滚动的高度 | 可读可写 |
scrollWidth |
表示整个内容区域的宽度，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollWidth应该等用于scrollTop + clientHeight | |
scrollHeight |
表示整个内容区域的高度，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollHeight应该等用于scrollLeft + clientWidth |
文档视图(DocumentView)和元素视图(ElementView)方法
elementFromPoint()getBoundingClientRect()getClientRects()scrollIntoView()
参考来自于 有个案例可以再关注一下