Changer le parchemin d'un div caché

Question

J'ai un div caché avec une hauteur fixe et une barre de défilement. Je voudrais changer la position de défilement, mais le navigateur ne me le fera pas, car le div est caché. La propriété scrollTop va coller à 0.

De même, je ne veux pas afficher et masquer le div qui provoque le scintillement.

Si quelqu'un sait comment le faire, ce sera très utile.

Merci!

Answer 1

Ma question n'était pas complète. Le div n'est pas caché tout seul. Cela fait partie d'un conteneur div, qui est caché. La div interne affiche avec son parent.

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

Nous utilisons jQuery pour créer un événement "onShow" personnalisé.

Alors maintenant, nous pouvons le faire:

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

Lorsque l'événement spectacle est lié, il ajoute la classe .onShow à la div. Et la fonction jQuery.fn.show() a été substituée pour déclencher l'événement 'show' sur les enfants qui ont la classe .onShow.

Merci à tous pour vos suggestions. Je suis désolé d'avoir fourni une question incomplète. Je donnerai tous les détails la prochaine fois.

Answer 2

Pour éviter vacillante div et fixer <div> indisponibilité pour les scripts que vous pouvez utiliser au lieu de se cacher la position "display: none;":

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

Answer 3

Vous pouvez enregistrer le défilement en utilisant la fonction de données de 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: "" 
    }); 
} 

Cela pourrait faire l'affaire

---

Vous pouvez peut-être juste utiliser visibility: hidden au lieu de display: none. La visibilité garde l'élément où il se trouve. Je crois que c'est exactement la même chose que opacity: 0, mais c'est une solution multi-navigateur.