2016-08-01 9 views
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がオーバーフロー要素があるので

答えて

0

、あなたはこのようにscrollTopスプライトを取得しようとすることができます:MDNから

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

要素のscrollTopスプライトは、の距離の測定値であります要素の最上部の可視コンテンツまでの最上位です。 Element.scrollTop

+0

あなたは私の日を..保存しました! –

関連する問題