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;或visilibility: hidden;代替隐藏元素，因为这样可以让元素仍然位于通常只能在视觉上隐藏的页面上。

如果你不能这样做，你可以暂时将元素切换为使用opacity或visibility，只是为了获得offsetTop位置 - 然后将其切换回{ {1}}

Answer 2

根据规范，如果元素被隐藏（此元素或任何祖先的style.display为“ none”）或元素本身的style.position设置为，则此属性在Webkit上将返回null。 “固定”。

如果元素本身的style.position设置为“ fixed”，则此属性在Internet Explorer（9）上将返回null。（显示：无不会影响该浏览器。）

from MDN

带有display：none的元素的offsetTop属性始终为0

2 个答案: