xxxLeft和xxxWidth 同理可证
<!DOCTYPE html>
<html lang="en" oncontextmenu="return false">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="index.js"></script>-->
<link rel="stylesheet" type="text/css" href="index.css">
<style>
html,body,{
height: 100%;
width: 100%;
}
div#container{
height: 800px;
width: 100%;
background-color: whitesmoke;
overflow: scroll;
border: white 5px solid;
}
div.box{
height: 150px;
width: 150px;
margin-top: 1050px;
background-color: aquamarine;
border: 10px black solid;
}
.button{
position: fixed;
}
</style>
</head>
<body>
<div id="container">
<button class="button">showMessage</button>
<div class="box">
container里面的box
</div>
</div>
<script>
window.onload = function () {
let container = document.querySelector("#container")
let box = document.querySelector(".box")
let btn = document.querySelector(".button")
btn.addEventListener('click',showMessage)
function showMessage() {
let windowScrollTop = document.documentElement.scrollTop //window滚动区域的高度 32px
let windowpageYOffset = window.pageYOffset//window滚动区域的高度 32px
let containerScrollTop = container.scrollTop//contianer滚动区域的高度 614px
let containerscrollHeight = container.scrollHeight // 1218px 包括滚动区域的高度
let containerclientHeight = container.clientHeight //779px，不包括滚动区域的高度，content+padding（如果出现滚动，这个不包括滚动条的高度）
let containeroffsetHeight = container.offsetHeight //810px 不包括滚动区域的高度 783px content+padding+border
let boxoffsetTop = box.offsetTop //距离文档左上角的高度
let boxclientTop = box.clientTop //border设置了10px，clientTop为10
let rectObject = box.getBoundingClientRect();
<!--
rectObject: DOMRect
bottom: 1225
height: 170
left: 5
right: 175
top: 1055
width: 170
x: 5
y: 1055
-->
// DOM元素到浏览器视图左上角的Y轴距离（需要手动计算） = DOM元素对象.offsetTop - 滚动元素.scrollTop
let DOMHeight = box.offsetTop - containerScrollTop //1055px - 441px = 614px
debugger
}
showMessage()
}
</script>
</body>
</html>
