Javascript scrollTop&；scrollLeft在显示时不工作：无元素

我试图在显示隐藏元素之前滚动它。这是我正在使用的代码：

---

.main{
显示：无；
位置：abolsute；
宽度：250px；高度：250px；
溢出：滚动；
}
.bg{
背景：蓝色url(http://defaulttester.com/img/bg-landing-mario.jpg); 
宽度：1200px；
高度：800px；
}

---

$（.main”）.scrollTop（$（.bg”）.height（）/2）；
$（“.main”）.scrollLeft（$（“.bg”）.width（）/2）；

如果显示，它可以正常工作，但如果显示：隐藏，它将无法正常工作。有没有办法避免这种情况并使其发挥作用

---

jsiddle:

使用

可见性：隐藏或类似的类：

.hide{
位置：绝对！重要；
顶部：-9999px！重要；
左：-9999px！重要；
}

或者这个（来自样板）：

.visuallyhidden{
位置：绝对位置；
溢出：隐藏；
剪辑：rect（0）；
高度：1px；宽度：1px；
边距：-1px；填充：0；边框：0；
}

显示
的内容：无在页面上没有位置

如果您的目标只是将scrollLeft和scrollTop设置为0（因为这是我的目标），那么一个非常有技巧的解决方案就是遵循以下步骤：


获取要重置的元素的引用
获取对元素父级的引用
从父元素中删除该元素
将元素追加回父元素

scrollTop和scrollLeft现在将设置回0，即使它们不可见

function resetScroll(element) {
    element.parentElement.replaceChild(element,element)
}

这将同时将scrollTop和scrollLeft设置为0，即使显示“无”

示例用法：

resetScroll(document.getElementById("my_scroll"))

一定有更好的办法吗？有黑客。我不能在可视性：隐藏的上使用.show（）；元素？是的，您应该将toggleClass（）或addClass（）/removeClass（）与我在这里显示的一个类一起使用。或$（'stuff'）.css（'visibility'，'visible'）；注意：这在Edge v42上不起作用（也可能是IE），使用相同元素的replaceChild会删除元素我还没有确认这在Edge上起作用（如果这仍然是一件事），但在JQuery中，我分离对象，然后将其追加回其父对象。