javascript - 显示为 : none is always 0 的元素的 offsetTop 属性

Question

我怀疑这是正确的行为，但我想知道我是否可以做些什么来获取元素的 offsetTop 的实际值。

期望的行为是当用户单击按钮时，列表将滚动，以便所选元素位于顶部，这在元素可见时工作正常，但它可以隐藏，我们希望这种行为即使它被隐藏也会发生，因此当用户取消隐藏它时，列表将滚动到所需的元素。

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;
}

JS

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

Answer 1

要么使用 opacity: 0; 要么使用 visibility: hidden; 来隐藏元素，因为这将允许元素仍然在页面上它通常会出现的位置，只是视觉上隐藏。

如果你做不到，你可以暂时将元素切换为使用opacity或visibility，只是为了获得offsetTop位置- 然后将其切换回 display: none;