Hacer que DIV sea invisible en CSS y JavaScript

He logrado hacer que una etiqueta DIV sea invisible en JavaScript estableciendo la pantalla en ninguna y la visibilidad en oculta. Se puede lograr con esta clase también:Hacer que DIV sea invisible en CSS y JavaScript

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

Display ninguno se asegurará de la caja DIV está vacía, y la visibilidad oculto se asegurará de que no es visible. El problema con este método es cuando tengo DIV desplazables o áreas de texto con contenido desbordado, cuando configuras display: ninguno, algunos navegadores olvidarán la posición de desplazamiento para estos elementos. ¿Hay una mejor manera de hacer que un DIV sea invisible sin usar la propiedad de visualización? Preferiría no recurrir al uso de JavaScript para registrar la posición de desplazamiento y, si es posible.

EDIT:

he conseguido solucionarlo con su ayuda, aplica lo siguiente:

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

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

me trataron izquierda: -9999px, pero esto se expande la barra de desplazamiento vertical en IE .. También envolví mi área de texto en otro DIV y apliqué los estilos visibles/invisibles a eso, porque de otra manera el área de texto perdería su posición de desplazamiento. Probé esto en Chrome, Firefox, IE y Safari en mi iPhone. Solo una nota, el DIV envuelto alrededor del área de texto no parece ayudar en FF, y la barra de desplazamiento todavía se reinicia. Pero los DIVs desplazables están bien ahora. ¡Gracias por tu ayuda!

Fuente

2011-02-25 Aram Kocharyan

Solo una conjetura, pero ¿ponerlo en un contenedor div y renderizar ** que ** div invisible lo haga? Como esto es una suposición, no lo estoy ofreciendo como respuesta. – Dancrumb

Hmmh, pensé que había tenido éxito con su solución, pero ahora descubrí que el navegador de Android todavía se desplaza hacia arriba ...:/ – Karussell

Ah, no tengo un android ... –

Esto probablemente funcionaría:

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

EDIT: me gustaría echar un vistazo en el common helpers en el código para HTML 5 para explorar otras formas de hacer las cosas desaparecen.

Fuente

2011-02-25 03:25:59

Es probable que desee hacer eso negativo, por lo la barra de desplazamiento horizontal de la página no entra. – icktoofay

Sí, por supuesto. ¡Gracias! –

Puede usar visibility:hidden si desea que el elemento sea invisible pero se represente. display:none lo eliminará por completo y causará el comportamiento de desplazamiento que mencionó.

Fuente

2011-02-25 03:24:46

'visibility: hidden' seguirá causando la elemento para ocupar espacio en el diseño. Supongo que esto no es lo que el OP está buscando porque está contento con 'display: none' menos los problemas de la barra de desplazamiento. –

Sí, sé de visibilidad, pero si su DIV es un bloque, aún ocupará ese espacio. –

para mí esto funciona. no ocupa tanto espacio;) – Karussell

Puede utilizar un método JQuery hide(). $ ('# DivID'). Hide(); o $ ('. DivClass'). hide();

Fuente

2011-02-25 03:25:00 Ali

En realidad yo esperaba no usar jquery a menos que tuviera que hacerlo, pero esta sería una opción mucho más fácil, mirando todo el código que he escrito :) –

Diseño, visualización: ninguno lo saca por completo del árbol de representación y en este limbo de Netherworld. Ya no tiene dimensiones ni posiciones bien definidas.

Si necesita un marcador de posición para la posición de desplazamiento, le sugiero que utilice un elemento de marcador de posición. Un DIV de altura cero o incluso un <a name="something""></a> funcionaría.

Fuente

2011-02-25 03:25:56 jpsimons

Prefiero usar una altura y ancho fijos (alto: 0; ancho: 0;). No te olvides de eliminar bordes, almohadillas y márgenes.

Fuente

2016-06-16 18:26:58 Macarrao

Puede usar jQuery para lograr la solución. Si desea ocultar totalmente/mostrar el div, entonces u puede utilizar:

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

Y si quiere que su div vuelven invisibles y su todavía existente en la página, a continuación, puede utilizar truco eficiente:

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

Fuente

2017-01-25 05:10:45

Hacer que DIV sea invisible en CSS y JavaScript

Respuesta

Cuestiones relacionadas