如何獲取向上滾動的div的頂部位置？

Question

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

滾動#tickers-col如何獲得正確的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函數： 獲取div / span標簽的位置

Answer 1

嘗試代碼打擊。

滾動然后將鼠標懸停在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 2

因此，我真的不明白您到底想做什么，但是根據定義，元素的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 3

滾動＃tickers-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> 

PS

 onmouseenter="mouseHover()" 

這件事看起來很丑陋，如果您需要為大於2的某些元素設置相同的函數作為事件監聽器，那么更好的方法將是

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