スクロールアップされたdivの更新されたトップポジションを取得するには？

Question

http://codepen.io/leongaban/pen/YNBgqE

あなたがスクロールした後​​どのようにdiv要素の正しい更新トップの座を得るのですか？ getPos見つかり

colPos Object {x: 8, y: 8}

const tickersCol = document.getElementById("tickers-col"); 
 

 

 
// https://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag 
 
function getPos(el) { 
 
    for (var lx=0, ly=0; 
 
     el != null; 
 
     lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent); 
 
    return {x: lx,y: ly}; 
 
} 
 

 
function mouseHover() { 
 
    const colPos = getPos(tickersCol); 
 
    console.log('colPos', colPos) 
 
}

.container { 
 
    position: fixed; 
 
    font-family: Arial; 
 
} 
 

 
#tickers-col { 
 
    overflow-y: auto; 
 
    height: 400px; 
 
} 
 

 
li { 
 
    margin-bottom: 10px; 
 
    list-style: none; 
 
    padding: 5px 10px; 
 
    width: 120px; 
 
    color: white; 
 
    background: salmon; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
}

<div class="container"> 
 
<div id="tickers-col"> 
 
    <ul> 
 
    <li onmouseenter="mouseHover()">aaa</li> 
 
    <li onmouseenter="mouseHover()">bbb</li> 
 
    <li onmouseenter="mouseHover()">ccc</li> 
 
    <li onmouseenter="mouseHover()">ddd</li> 
 
    <li onmouseenter="mouseHover()">eee</li> 
 
    <li onmouseenter="mouseHover()">fff</li> 
 
    <li onmouseenter="mouseHover()">ggg</li> 
 
    <li onmouseenter="mouseHover()">hhh</li> 
 
    <li onmouseenter="mouseHover()">iii</li> 
 
    <li onmouseenter="mouseHover()">jjj</li> 
 
    <li onmouseenter="mouseHover()">kkk</li> 
 
    <li onmouseenter="mouseHover()">lll</li> 
 
    <li onmouseenter="mouseHover()">mmm</li> 
 
    <li onmouseenter="mouseHover()">nnn</li> 
 
    <li onmouseenter="mouseHover()">ooo</li> 
 
    <li onmouseenter="mouseHover()">ppp</li> 
 
    <li onmouseenter="mouseHover()">qqq</li> 
 
    <li onmouseenter="mouseHover()">rrr</li> 
 
    <li onmouseenter="mouseHover()">sss</li> 
 
    <li onmouseenter="mouseHover()">ttt</li> 
 
    <li onmouseenter="mouseHover()">uuu</li> 
 
    <li onmouseenter="mouseHover()">vvv</li> 
 
    <li onmouseenter="mouseHover()">www</li> 
 
    <li onmouseenter="mouseHover()">yyy</li> 
 
    <li onmouseenter="mouseHover()">xxx</li> 
 
    <li onmouseenter="mouseHover()">zzz</li> 
 
    </ul> 
 
</div> 
 
</div>

：どんなに行く、それはまだDIVの元y位置を表示する方法をはるかに列までのログから

ここから関数：Get the position of a div/span tag

Answer 1

私は正確に何をしようとしているのか分かりませんが、定義上、offsetTopプロパティはoffsetParent要素の一番上を基準にして一番上の位置（ピクセル単位）を返します。

どのくらい長くスクロールしても、検査している要素とその親の間の最上位の距離が変更されない場合、上限値は変更されません。

おそらくあなたが探しているプロパティはですscrollTop;

const getPos = (el) => { 
    for (var lx=0, ly=0; 
     el != null; 
     lx += el.offsetLeft, ly += el.scrollTop, el = el.offsetParent); 
    return { x:lx, y:ly }; 
} 

Answer 2

コード打撃を試してください。

divの1つをスクロールし、その上にカーソルを置くと、y座標が更新されていることがわかります。

const tickersCol = document.getElementById("tickers-col"); 
 

 

 
const getPos = (el) => { 
 
    for (var lx=0, ly=0; 
 
    el != null; 
 
    lx += el.offsetLeft, ly += el.scrollTop, el = el.offsetParent); 
 
    return { x:lx, y:ly }; 
 
} 
 

 
function mouseHover() { 
 
    const colPos = getPos(tickersCol); 
 
    console.log('colPos', colPos) 
 
}

.container { 
 
    position: fixed; 
 
    font-family: Arial; 
 
} 
 

 
#tickers-col { 
 
    overflow-y: auto; 
 
    height: 400px; 
 
} 
 

 
li { 
 
    margin-bottom: 10px; 
 
    list-style: none; 
 
    padding: 5px 10px; 
 
    width: 120px; 
 
    color: white; 
 
    background: salmon; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
}

<div class="container"> 
 
<div id="tickers-col"> 
 
    <ul> 
 
    <li onmouseenter="mouseHover()">aaa</li> 
 
    <li onmouseenter="mouseHover()">bbb</li> 
 
    <li onmouseenter="mouseHover()">ccc</li> 
 
    <li onmouseenter="mouseHover()">ddd</li> 
 
    <li onmouseenter="mouseHover()">eee</li> 
 
    <li onmouseenter="mouseHover()">fff</li> 
 
    <li onmouseenter="mouseHover()">ggg</li> 
 
    <li onmouseenter="mouseHover()">hhh</li> 
 
    <li onmouseenter="mouseHover()">iii</li> 
 
    <li onmouseenter="mouseHover()">jjj</li> 
 
    <li onmouseenter="mouseHover()">kkk</li> 
 
    <li onmouseenter="mouseHover()">lll</li> 
 
    <li onmouseenter="mouseHover()">mmm</li> 
 
    <li onmouseenter="mouseHover()">nnn</li> 
 
    </ul> 
 
</div> 
 
</div>

これはあなたが望んでいるなら、私に教えてください。

Answer 3

あなたは＃ティッカー-COLをスクロールした後、どのようにdiv要素の正しい更新トップの座を得るのですか？

divスクロール時には移動しません。代わりに、直接の子のみが移動します。

だから、トップの位置は以下のとおりです。#ticker-colのoffsetTop - ulのscrollTop、そしてあなたのjsのコードは次のようになります。

(function(){ 
 

 
var tc = document.querySelector("#tickers-col"); 
 

 
tc.addEventListener("scroll",function(){  
 
    console.log("colPos:", { x : tc.parentNode.offsetLeft, 
 
          y : tc.parentNode.offsetTop - tc.scrollTop, 
 
          });  
 
}); 
 

 

 

 
})();

.container { 
 
    position: fixed; 
 
    font-family: Arial; 
 
} 
 

 
#tickers-col { 
 
    overflow-y: auto; 
 
    height: 400px; 
 
} 
 

 
li { 
 
    margin-bottom: 10px; 
 
    list-style: none; 
 
    padding: 5px 10px; 
 
    width: 120px; 
 
    color: white; 
 
    background: salmon; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
}

<div class="container"> 
 
<div id="tickers-col"> 
 
    <ul> 
 
    <li>aaa</li> 
 
    <li>bbb</li> 
 
    <li>ccc</li> 
 
    <li>ddd</li> 
 
    <li>eee</li> 
 
    <li>fff</li> 
 
    <li>ggg</li> 
 
    <li>hhh</li> 
 
    <li>iii</li> 
 
    <li>jjj</li> 
 
    <li>kkk</li> 
 
    <li>lll</li> 
 
    <li>mmm</li> 
 
    <li>nnn</li> 
 
    <li>ooo</li> 
 
    <li>ppp</li> 
 
    <li>qqq</li> 
 
    <li>rrr</li> 
 
    <li>sss</li> 
 
    <li>ttt</li> 
 
    <li>uuu</li> 
 
    <li>vvv</li> 
 
    <li>www</li> 
 
    <li>yyy</li> 
 
    <li>xxx</li> 
 
    <li>zzz</li> 
 
    </ul> 
 
</div> 
 
</div>

P.S.

onmouseenter="mouseHover()" 

あなたはより良いアプローチはとても

var collection = 
Array.prototype.slice.call(
    document.querySelectorAll('mycssselector') 
).forEach(function(el){ 
    el.addEventListener("myevent",/*callback*/function(){}); 
});