scrollTop & scrollLeft do not work on display:none elements

I'm trying to scroll an hidden element before I show it. This is the code i'm working with:

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

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

IT works fine if its showing but if its display:hidden it will simple not work. Is there anyway to avoid this and make it work?

如果显示它，它的工作正常，但如果它显示：隐藏它将简单无法工作。反正有没有避免这种情况并让它发挥作用？

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

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

3 个解决方案

#1

Use visibility: hidden; or some class like this instead:

使用可见性：隐藏;或者像这样的一些类：

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

Or this (from Boilerplate):

或者这个（来自Boilerplate）：

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

Something with display: none; has no location on the page, as you probably knew.

显示的东西：无;你可能知道，页面上没有位置。

Check out this article on the subject.

看看关于这个主题的这篇文章。

#2

If your goal is to just set scrollLeft and scrollTop to 0(since that was my goal), one very hacky solution is to follow these steps:

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

Get a reference to the element you want to reset.
获取要重置的元素的引用。
Get a reference to the element's parent.
获取元素父级的引用。
Remove the element from the parent.
从父级中删除元素。
Append the element back to the parent.
将元素追加回父级。

scrollTop and scrollLeft will now be set back to 0 even though they are invisible.

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

#3

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

This will set both scrollTop and scrollLeft to 0 even if display none.

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

Example use:

使用示例：

resetScroll(document.getElementById("my_scroll"))

#1