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

回答

相关问题