scrollTop i scrollLeft nie działają na ekranie: ukryte elementy

Question

Próbuję przewinąć ukryty element, zanim go pokażę. Jest to kod pracuję z:

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

to działa dobrze, jeśli jego pokaz, ale jeśli jego display:hidden to będzie proste nie działa. Czy mimo to można tego uniknąć i sprawić, by działało?

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

Answer 1

Zastosowanie visibility: hidden; lub niektóre klasy tak zamiast:

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

Albo to (od boilerplate):

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

Coś z display: none; ma lokalizację na stronie , jak zapewne wiesz.

Check out this article on the subject.

Answer 2

Jeśli twoim celem jest po prostu ustawić scrollLeft i scrollTop 0 (ponieważ to był mój cel), jedno rozwiązanie bardzo hacky jest następujące kroki:

• uzyskać odniesienie do element, który chcesz zresetować.
• Uzyskaj odniesienie do elementu nadrzędnego elementu.
• Usuń element z obiektu nadrzędnego.
• Dołącz element z powrotem do rodzica.

Funkcja scrollTop i scrollLeft zostaną ustawione ponownie na 0, nawet jeśli są niewidoczne.

Answer 3

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

Spowoduje to ustawienie parametru scrollTop lub scrollLeft na 0, nawet jeśli brak wyświetlania.