offsetTop顯示元素上的屬性：none始終爲0

我懷疑這是正確的行爲，但我想知道是否有任何事情可以做，以獲得元素的offsetTop的實際值。offsetTop顯示元素上的屬性：none始終爲0

想要的行爲是，當用戶點擊一個按鈕時，列表將被滾動，以便所選項目將位於頂部，這可以很好地工作，而元素是可見的，但它可以隱藏，我們希望這行爲即使在隱藏時也會發生，因此當用戶取消隱藏後，列表將滾動到所需的項目。

HTML

<div id='list-wrapper'> 
    <ul> 
    <li id='one'>One</li> 
    <li id='two'>Two</li> 
    <li id='three'>Three</li> 
    </ul> 
</div>

CSS

.list-wrapper { 
    display: none; 
    position: relative; 
    overflow-y: scroll; 
}

let listElement: Element = document.getElementById('list-wrapper'); 
let li3: Element = document.getElementById('three'); 
listElement.scrollTop = li3.offsetTop;

來源

2017-02-21 efarley

的一種方式來解決這將是緩存滾動操作直到你顯示元素，如果元素被隱藏。 –

要麼使用opacity: 0;或visilibility: hidden;，而不是隱藏元素，將允許元素仍然在頁面上它通常會在視覺上隱藏。

如果你不能做到這一點，你可以切換到使用opacity或visibility是暫時的，只是爲了讓offsetTop位置的元素 - 然後再切換回display: none;

來源

2017-02-21 00:16:39

是的，我考慮到了這一點，它將需要對工作空間的位置以及其他項目的大小進行重大重構，以說明元素仍然佔據文檔中相同的空間，即使它不可見。 – efarley

@efarley你可以做一些事情，比如將'height'和'width'設置爲'0'，直到顯示出來。 –

是的寬度：0做到了！好想法。 – efarley

offsetTop顯示元素上的屬性：none始終爲0

回答

相關問題