滾動時獲取元素相對於文檔的動態位置

我已經有了一個包含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。

來源

2012-03-13 patad

我不知道這是否適合您的解決方案，但如何將您的列表添加到div元素並在div上設置css樣式height: 400px; overflow: scroll。這應該做你想做的。如果您只想隱藏視口外的視窗，請在該視窗上選擇overflow: hidden。像這樣：

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

來源

2012-03-13 12:01:57 Chris

謝謝你。這不是我正在尋找的東西。我需要隱藏lis，因爲它們包含沉重的圖像，上下滾動時會消耗內存。無論如何，非常感謝 – patad 2012-03-13 12:35:30

滾動時獲取元素相對於文檔的動態位置

回答

相關問題