滚动时获取相对于文档的元素动态位置

Question

我有一张200+以上的清单。该列表大约400px高，因此所有lis不能同时显示。我想隐藏（可见性：隐藏）超出ul视口​​的lis。

要做到这一点，我想想我需要获得每个li的最高位置，相对于文档并将其与ul的顶部位置进行比较，以查看它们是否在ul之外或不。 每个li高70px。不确定这是否是正确的方法，但这是我到目前为止所尝试的：

var ul = document.getElementsByTagName('ul')[0], 
    lis = ul.getElementsByTagName('li'),
    getPos = function(elem) {
      var offsetTop = 0;
      do {
        if (!isNaN(elem.offsetTop)){
          offsetTop += elem.offsetTop;
        }
      } while(elem = elem.offsetParent);
      return offsetTop;
    },
    ulTop = getPos(ul); // outputs 100

ul.addEventListener("scroll", function() {
   console.log(getPos(lis[0])); // outputs 100
   console.log(getPos(lis[1])); // outputs 170
   console.log(getPos(lis[2])); // outputs 240 and so on..
});

控制台日志将始终输出相同的内容。即使滚动！为什么？我的意思是，当滚动时，显然lis正在移动，因此它们的位置应该改变，对吧？

显然，这不是获得“移动”li的顶部位置的正确方法，在移动它/滚动ul时应该改变。做正确的方法是什么？或者我甚至不得不这样去隐藏ul以外的lis？

哦，我很乐意，但我不能在这里使用任何库，所以只有原生的JS。