Machen Sie DIV in CSS und JavaScript unsichtbar

Ich habe es geschafft, ein DIV-Tag in JavaScript unsichtbar zu machen, indem ich die Anzeige auf „Keine“ und die Sichtbarkeit auf „Ausgeblendet“ gesetzt habe. Es kann auch mit dieser Klasse erreicht werden:

.invisible {
    display: none;
    visibility: hidden;
}

Keine anzeigen stellt sicher, dass das DIV-Feld leer ist, und Sichtbarkeit ausgeblendet stellt sicher, dass es nicht sichtbar ist. Das Problem bei dieser Methode ist, wenn ich scrollbare DIVs oder Textareas mit überlaufendem Inhalt habe, wenn Sie display: none einstellen, werden einige Browser die Scrollposition für diese Elemente vergessen. Gibt es eine bessere Möglichkeit, ein DIV unsichtbar zu machen, ohne die Anzeigeeigenschaft zu verwenden? Ich würde lieber nicht auf die Verwendung von JavaScript zurückgreifen, um die Bildlaufposition und dergleichen nach Möglichkeit aufzuzeichnen.

BEARBEITEN:

Ich habe es mit Ihrer Hilfe geschafft, es zu lösen, ich habe Folgendes angewendet:

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}

.visible {
    visibility: visible;
    position: static;
}

Ich habe es mit left: -9999px versucht, aber dies erweitert die vertikale Bildlaufleiste im IE … Ich habe auch mein Textfeld in ein anderes DIV gepackt und die sichtbaren / unsichtbaren Stile darauf angewendet, da das Textfeld sonst seine Bildlaufposition verlieren würde. Ich habe dies in Chrome, Firefox, IE und Safari auf meinem iPhone getestet. Nur eine Anmerkung, das um das Textfeld gewickelte DIV schien in FF nicht zu helfen, und die Bildlaufleiste wurde immer noch zurückgesetzt. Aber die scrollbaren DIVs sind jetzt in Ordnung. Danke für Ihre Hilfe!

Sie können einfach verwenden visibility:hidden wenn Sie möchten, dass das Element unsichtbar, aber dennoch gerendert wird. display:none wird es vollständig entfernen und das von Ihnen erwähnte Bildlaufverhalten verursachen.

Das würde wahrscheinlich funktionieren:

.invisible {
    position: absolute;
    left: -9999px;
}

BEARBEITEN: Ich würde mir die mal anschauen gemeinsame Helfer im HTML5-Boilerplate-Code, um andere Möglichkeiten zu erkunden, Dinge verschwinden zu lassen.

Sie können verwenden jQuery um die Lösung zu erreichen. Wenn Sie die vollständig verstecken/anzeigen möchten divdann kannst du verwenden:

$('#my_element').show()
$('#my_element').hide()

Und wenn Sie möchten, dass Ihr div unsichtbar wird und immer noch auf der Seite vorhanden ist, können Sie einen effizienten Trick anwenden:

$('#my_element').css('opacity', '0.0');  // invisible Maximum
$('#my_element').css('opacity', '1.0');  // visible maximum

Sie können eine Hide()-Methode von JQuery verwenden. $(‘#DivID’).hide(); oder $(‘.DivClass’).hide();

Was das Layout angeht, bringt display:none es vollständig aus dem Rendering-Baum heraus und in diese Vorhölle der Unterwelt. Es hat keine genau definierten Abmessungen oder Positionen mehr.

Wenn Sie einen Platzhalter für die Bildlaufposition benötigen, würde ich vorschlagen, ein Platzhalterelement zu verwenden. Irgendein nullhohes DIV oder vielleicht sogar eins <a name="something""></a> würde funktionieren.

Ich verwende lieber eine feste Höhe und Breite (height:0; width:0;). Vergessen Sie nicht, Ränder, Polsterungen und Ränder zu entfernen.