Cambia la scroll di un div nascosto

Question

Ho un div nascosto con un'altezza fissa e una barra di scorrimento. Vorrei cambiare la posizione di scorrimento, ma il browser non lo farà, poiché il div è nascosto. La proprietà scrollTop si attiverà su 0.

Inoltre, non voglio mostrare e nascondere il div back, che causa lo sfarfallio.

Se qualcuno sa come farlo, sarà davvero utile.

Grazie!

Answer 1

La mia domanda non è stata completata. Il div non è nascosto da solo. Fa parte di un contenitore div, che è nascosto. Il div interno viene visualizzato con il suo genitore.

<div class="container hidden"> 
    <div id="some_div">Content</div> 
    <div id="my_div">I wanted to scroll this one</div> 
    <div id="other_div">Content</div> 
</div> 

Utilizziamo jQuery per creare un evento personalizzato "onShow".

Così ora siamo in grado di fare questo:

$('#my_div').bind('show', function() { 
    handle_scrollTopOffset(); 
}); 

Quando l'evento spettacolo è legato, si aggiunge la classe .onShow al div. E la funzione jQuery.fn.show() è stata sovrascritta per attivare l'evento "show" sui child che hanno la classe .onShow.

Grazie a tutti per i loro suggerimenti. Mi dispiace di aver fornito una domanda incompleta. La prossima volta darò tutti i dettagli.

Answer 2

Per evitare div sfarfallio e fissare <div> indisponibilità per gli script è possibile utilizzare la posizione che si nascondono invece di "display: none;":

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

Answer 3

è possibile salvare il rotolo utilizzando la funzione dei dati di jQuery.

function SaveScroll(val) 
{ 
    $(the_element).data("Scroll", val); 
} 

function Show() 
{ 
    var element = $(the_element); 

    // prevent from showing while scrolling 
    element.css 
    ({ 
     position: "absolute", 
     top: "-50000px", 
     left: "-50000px", 
     display: "" 
    }); 

    // Scroll to the position set when it was hidden 
    element.scrollTop(element.data("Scroll")); 

    // show the element 
    element.css 
    ({ 
     position: "", 
     top: "", 
     left: "" 
    }); 
} 

Questo potrebbe fare il trucco

---

È forse possibile utilizzare solo visibility: hidden invece di display: none. La visibilità mantiene l'elemento dove è. Credo che sia esattamente la stessa cosa di opacity: 0, ma è una soluzione cross-browser.