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

Question

我已经有了一个包含200多个lis的列表。该列表高约400px，因此所有lis不能同时显示。我想隐藏（可见性：隐藏）超出ul视口​​的lis。

要做到这一点，我认为我需要得到每个李，相对于文件的顶部位置，并将其与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。

Answer 1

我不知道这是否适合您的解决方案，但如何将您的列表添加到div元素并在div上设置css样式height: 400px; overflow: scroll。这应该做你想做的。如果您只想隐藏视口外的视窗，请在该视窗上选择overflow: hidden。像这样：

<div style="width: 200px; height: 400px; overflow: hidden"> 
<ul> 
    <li>...</li> 
</ul> 
</div>