如何獲取滾動div的更新頂部位置？

Question

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

後您滾動​​你怎麼弄的div正確更新的頂部位置？

從日誌不管多遠了列去，它仍然顯示div的原y位置：

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>

找到了getPos功能從這裏：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上，可以看到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>

附：

onmouseenter="mouseHover()" 

這件事看起來很難看，如果你需要設置相同功能的一些元素數量> 2的事件偵聽器的更好的辦法是，像這樣

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