1
他のdiv要素内のdiv要素のスクロール距離を計算したいとします。私はそのためにoffsetTopを使用していますが、私のコードでは常に0を返します。私は間違いをどこにしているのか分かりません。fetch offset他の要素に対する要素の上端
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のコードを試してみました。それは実りある結果をもたらさない。前もって感謝します。要素#containがオーバーフロー要素があるので
あなたは私の日を..保存しました！ –