scrollTop e scrollLeft non funzionano sul display: elementi nascosti

Question

Sto provando a scorrere un elemento nascosto prima che lo mostri. Questo è il codice con cui sto lavorando:

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

funziona bene se mostra, ma se il suo display:hidden sarà semplice non funziona. C'è comunque da evitare questo e farlo funzionare?

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

Answer 1

Usa visibility: hidden; o una certa classe come questo, invece:

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

O questo (da Boilerplate):

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

Qualcosa con display: none; non ha alcuna posizione sulla pagina , come probabilmente sapevi.

Check out this article on the subject.

Answer 2

Se il vostro obiettivo è quello di appena impostato scrollLeft e scrollTop a 0 (dato che era il mio obiettivo), una soluzione molto hacky è quello di attenersi alla seguente procedura:

• ottenere un riferimento alla elemento che si desidera ripristinare.
• Ottieni un riferimento al genitore dell'elemento.
• Rimuovi l'elemento dal genitore.
• Aggiunge nuovamente l'elemento al genitore.

scrollTop e scrollLeft verranno ora impostati su 0 anche se sono invisibili.

Answer 3

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

Ciò imposta scrollTop o scrollLeft su 0 anche se non visualizza nessuno.