0
我已经有了一个包含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。
谢谢你。这不是我正在寻找的东西。我需要隐藏lis,因为它们包含沉重的图像,上下滚动时会消耗内存。无论如何,非常感谢 – patad 2012-03-13 12:35:30