scrollTop 和 scrollLeft 在 display:none 元素上不起作用答案

【问题标题】：scrollTop & scrollLeft do not work on display:none elementsscrollTop 和 scrollLeft 在 display:none 元素上不起作用
【发布时间】：2013-06-07 12:34:28
【问题描述】：

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

<div class="main">
    <div class="bg">
    </div>
</div>

.main { 
    display:none; 
    position:abolsute; 
    width:250px;height:250px; 
    overflow:scroll;
}
.bg { 
    background: blue url(http://defaulttester.com/img/bg-landing-mario.jpg); 
    width:1200px; 
    height:800px; 
}

$(".main").scrollTop($(".bg").height()/2);
$(".main").scrollLeft($(".bg").width()/2);

如果它显示它可以正常工作，但如果它的display:hidden 它将简单地不起作用。有没有办法避免这种情况并让它发挥作用？

JSFiddle：http://jsfiddle.net/dpjzJ/

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

改用visibility: hidden; 或类似的类：

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

或者这个（来自样板）：

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

您可能知道，带有display: none; 的内容在页面上没有位置。

Check out this article on the subject.

【讨论】：

一定有更好的方法吗？有黑客。我不能在可见性上使用 .show(): hidden;元素？
是的，您应该使用 toggleClass() 或 addClass() / removeClass() 以及我在这里展示的类之一。或者 $('stuff').css('visibility', 'visible');

【解决方案2】：

如果您的目标只是将 scrollLeft 和 scrollTop 设置为 0（因为这是我的目标），那么一个非常简单的解决方案是按照以下步骤操作：

获取对要重置的元素的引用。
获取对元素父级的引用。
从父元素中移除元素。
将元素添加回父元素。

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

【讨论】：

【解决方案3】：

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

这会将 scrollTop 和 scrollLeft 都设置为 0，即使不显示。

使用示例：

resetScroll(document.getElementById("my_scroll"))

【讨论】：

警告：这在 Edge v42 上不起作用（也许 IE 也是），使用相同元素的 replaceChild 将删除该元素
我还没有确认这在 Edge 中是否有效（如果这仍然是一件事），但在 JQuery 中，我分离了对象，然后将其附加回其父对象。