获取偏移相对于另一个元素的元素顶部

我想计算另一个div元素中div元素的滚动距离。我正在使用offsetTop，但它总是在我的代码中返回0。我无法弄清楚我犯了什么错误。获取偏移相对于另一个元素的元素顶部

function getScrollVal() { 
 
\t console.log(window.pageYOffset); 
 
\t var wrap = document.getElementById("wrapper"); 
 
\t console.log(wrap.id); 
 
\t console.log(wrap.offsetParent.id); 
 
\t var parent = wrap.offsetParent; 
 
    console.log("scrollTop: " + wrap.scrollTop + " scrollLeft: " + wrap.scrollLeft); 
 
\t console.log("offsetTop: " + wrap.offsetTop + " offsetLeft: " + wrap.offsetLeft); 
 
    /* 
 
    var xx = wrap.offsetLeft; 
 
\t var yy = wrap.offsetTop; 
 
\t while(wrap = wrap.offsetParent){ 
 
\t \t xx += wrap.offsetLeft; 
 
\t \t yy += wrap.offsetTop; 
 
\t } 
 
    */ 
 
}

body, html { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
#contain { 
 
\t position: relative; 
 
\t width:100%; 
 
\t height: 100vh; 
 
\t background: yellow; 
 
\t overflow: auto; 
 
} 
 
#wrapper { 
 
\t width: 85%; 
 
\t margin: 0 auto; 
 
\t background: red; 
 
} 
 
.full { 
 
\t height: 100vh; 
 
\t width: 85%; 
 
\t margin: 0 auto; 
 
} 
 
#one { background:#222;} 
 
#two{ background:#00c590;} 
 
#three{ background:#3429c5;} 
 
#four{background:#bbb;} 
 
#b { 
 
\t position: fixed; 
 
\t z-index: 1000; 
 
\t top: 30px; 
 
\t left: 30px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
</head> 
 
<body> 
 
    <div id="contain"> 
 
    <div id="wrapper"> 
 
\t <div id="one" class="full"></div> 
 
\t <div id="two" class="full"></div> 
 
\t <div id="three" class="full"></div> 
 
\t <div id="four" class="full"></div> 
 
    </div> 
 
    </div> 
 
\t <button id="b" type="button" onClick="getScrollVal();" value="click me">Press me</button> 
 
\t 
 
</body> 
 
</html>

我已经试过了评论里面的js代码。那个没有提供富有成果的结果。提前致谢。

来源

2016-08-01 srikanth sharma

由于元素#contain是溢出元素，你可以尝试让scrollTop的是这样的：

console.log("scroll top:", document.getElementById('contain').scrollTop);

从MDN：

一个元素的scrollTop的是的距离的测量元素的顶部到其最上面的可见内容。 Element.scrollTop

来源

2016-08-01 08:31:44 kedgeree

你救了我的一天.. !! –

获取偏移相对于另一个元素的元素顶部

回答

相关问题