我想计算一个 div 元素在另一个 div 元素中的滚动距离。我使用 offsetTop 来实现这一点，但它在我的代码中总是返回 0。我无法弄清楚我在哪里犯了错误。
function getScrollVal() {
console.log(window.pageYOffset);
var wrap = document.getElementById("wrapper");
console.log(wrap.id);
console.log(wrap.offsetParent.id);
var parent = wrap.offsetParent;
console.log("scrollTop: " + wrap.scrollTop + " scrollLeft: " + wrap.scrollLeft);
console.log("offsetTop: " + wrap.offsetTop + " offsetLeft: " + wrap.offsetLeft);
/*
var xx = wrap.offsetLeft;
var yy = wrap.offsetTop;
while(wrap = wrap.offsetParent){
xx += wrap.offsetLeft;
yy += wrap.offsetTop;
}
*/
}body, html {
margin: 0;
padding: 0;
}
#contain {
position: relative;
width:100%;
height: 100vh;
background: yellow;
overflow: auto;
}
#wrapper {
width: 85%;
margin: 0 auto;
background: red;
}
.full {
height: 100vh;
width: 85%;
margin: 0 auto;
}
#one { background:#222;}
#two{ background:#00c590;}
#three{ background:#3429c5;}
#four{background:#bbb;}
#b {
position: fixed;
z-index: 1000;
top: 30px;
left: 30px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="contain">
<div id="wrapper">
<div id="one" class="full"></div>
<div id="two" class="full"></div>
<div id="three" class="full"></div>
<div id="four" class="full"></div>
</div>
</div>
<button id="b" type="button" onClick="getScrollVal();" value="click me">Press me</button>
</body>
</html>我已经尝试了注释中的js代码。那并没有带来丰硕的成果。提前致谢。
最佳答案
由于元素#contain是溢出元素，你可以尝试这样获取scrollTop:
console.log("scroll top:", document.getElementById('contain').scrollTop);
来自 MDN:
An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content. Element.scrollTop
关于javascript - 获取元素相对于另一个元素的 offsetTop，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38691923/