javascript - 如何获取向上滚动的 div 的更新顶部位置？

Question

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

滚动 #tickers-col 后，如何获得正确更新的 div 顶部位置？

从日志来看，无论列向上移动多远，它仍然显示 div 的原始 y 位置:

colPos 对象 {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 };
}