ScrollTop & scrollLeft не отображаются на дисплее: скрытые элементы

Я пытаюсь прокрутить скрытый элемент, прежде чем я его покажу. Это код, с которым я работаю:

<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 работает нормально, если его показ, но если его display:hidden он прост не работает. В любом случае, чтобы избежать этого и заставить его работать?

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

Ответ 1

Используйте visibility: hidden; или какой-нибудь класс, как это:

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

Или это (из Boilerplate):

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

Что-то с display: none; не имеет местоположения на странице, как вы, наверное, знали.

Посмотрите эту статью на эту тему.

Ответ 2

Если ваша цель - просто установить scrollLeft и scrollTop в 0 (поскольку это была моя цель), одно очень хакерское решение состоит в следующем:

Получить ссылку на элемент, который вы хотите использовать reset.
Получить ссылку на родительский элемент.
Удалить элемент из родителя.
Добавить элемент обратно в родительский.

scrollTop и scrollLeft теперь будут установлены на 0, даже если они невидимы.

Ответ 3

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

Это приведет к тому, что scrollTop или scrollLeft будут равны 0, даже если они не отображаются.