如何获取向上滚动 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");


// 
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

试试下面的代码。

滚动然后将鼠标悬停在其中一个 div 上，您可以看到 y-coordinate 正在更新。

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 属性将 return 相对于顶部的顶部位置（以像素为单位） 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

After you scroll the #tickers-col how do you get the correct updated top position of the div?

div 本身在滚动时不移动，只有它的直接子级在移动。

所以最高位置是：#ticker-col's offsetTop - ul's 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()"

这个东西看起来很难看，如果你需要为一定数量的元素设置相同的函数 > 2 作为事件监听器，更好的方法是这样

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

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

How to get updated top position of scrolled up div?

javascript

css

css-position

mouseevent