Desplazamiento de pagina en ventana

marodal · #1 (**permalink**) 19/11/2013, 13:28

Hola a todos. Estoy diseñando una pantalla en jsp que se muestre en una nueva ventana cuando pincho en un enlace de otra pantalla.

Uso la funcion javascript window.open(...), y le indico como argumento que quiero un tamaño de ventana de 1000x400 pixeles.
La pagina que muestra la ventana está diseñada con contenedores y porcentajes, por lo que al redimensionar la pantalla el contenido se redimensiona también.
El unico problema que tengo es el siguiente:

Si hago scroll con la ruleta del raton hacia arriba, la pagina se desplaza hacia arriba de la ventana y me aparece un trozo blanco que se muestra en la ventana.

¿Como puedo evitar este efecto?

Gracias por adelantado

Carlangueitor · #2 (**permalink**) 19/11/2013, 15:30

Realmente no entiendo tu problema, ¿puedes mostrar un demo o en su defecto imágenes (y el código correspondiente?

Saludos

marodal · #3 (**permalink**) 19/11/2013, 16:17

Aver si me explico mejor.

Tengo una pagina con un boton, al pinchar en el boton se debe mostrar una pagina que he diseñado en una ventana de un tamaño determinado, en mi caso 1000x400.
Para conseguir esto uso la funcion window.open() de javascript.

La pagina que he diseñado está implementada con css dividiendola en diferentes contenedores y usando posicionamiento absoluto y porcentajes para todos los contenedores.
La pagina se muestra correctamente, y se redimensiona tambien de forma correcta. El unico problema es que al mover la ruleta de mi raton hacia arriba, la pagina se desplaza en la ventana y me aparece un trozo en blanco por debajo.

Por favor, mira la imagen.

Supong que la parte de color es mi pagina, y que al mover la ruleta mi pagina se desplaza hacia arriba y aparece la parte blanca.

Muchas gracias por tu ayuda

Carlangueitor · #4 (**permalink**) 19/11/2013, 16:29

Primero posiciones absolutas solo usalas cuando es estrictamente necesario.

Y luego pues parece que tu tienes ese pedazo extra ahí, puede ser un margin o un padding (y además ocultado las barras de desplazamiento), pero sin el código no se puede hacer nada.

Saludos

marodal · #5 (**permalink**) 19/11/2013, 17:21

Pues he usado posicionamiento absoluto para todos mis contenedores. Así me aseguro su posición respecto al contenedor padre.

Es que no se me ocurrió otra forma de implementación que usara porcentajes para todos mis contenedores y que se redimensionaran al mismo tiempo que redimensiono mi ventana.

Con este ejemplo de pagina tambien ocurre lo que digo:
pagina.html

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link type="text/css" href="estilo.css" rel="stylesheet"></link>
</head>
<body>
<div id="titulo"></div>
<div id="datos">
     <div id="contenedor1"></div>
     <div id="contenedor2"></div>
</div>
</body>
</html>

estilo.css

Código:

#titulo{
   position:absolute;
   top:0%;
   left:0%;
   width:100%;
   height:10%
}
#datos{
  position:absolute;
  top:10%;
left:0%
width:100%
height:90;
}
#contenedor1{
top:0%;
left:0%;
width:100%;
height:40%;
}
#contenedor2{
top:40%;
left:0%
width:100%
height:60%
}

Con este tipo de css tengo los contenedores en la posicion que quiero y se redimensionan al cambiar tamaño de ventana. Pero aparece la parte blanca por debajo al hacer scroll con el raton. ¿Alguna idea?

Supon que esta pagina se muestra en una ventana 1000x600 al hacer click en un boton de otra pagina:
onclick= window.open("pagina.html","ventana",1000,600);

Gracias

Carlangueitor · #6 (**permalink**) 19/11/2013, 17:32

Con tu ejemplo no sale lo que dices. De todas maneras, si, estás usando mal las posiciones, no las necesitas: http://jsfiddle.net/Kn3xq/

Saludos

marodal · #7 (**permalink**) 19/11/2013, 17:38

El posicionamiento es absoluto en los dos ultimos contenedores, se me olvido ponerlo.

¿Has mostrado la pagina en una ventana emergente (window.open()) de 1000x600? Por lo que veo en el link que me has pasado, lo haces en una ventana normal.

Una pregunta: ¿las reglas para el body y html las has añadido no? En mi css no estan y he leido que ese puede ser el problema. El codigo de mi pagina no lo tengo aqui, por lo que no lo puedo probar.

Muchas graciasss

Carlangueitor · #8 (**permalink**) 19/11/2013, 17:51

Si, lo probé no pasa nada extraño.

Saludos

marodal · #9 (**permalink**) 20/11/2013, 12:48

¿Lo has probado en google chrome? Es que ni en firefox ni iexplorer ocurre, solo en chrome.

He puesto la propiedad en body,html: overflow:hidden, y se reduce algo el efecto, la pagina se desplaza solo un poco, mucho menos que antes...

Ayuuda please!

Carlangueitor · #10 (**permalink**) 20/11/2013, 13:31

Sí, lo probé solo en Chrome.

Pero no pones el código que usas en realidad, así no se puede ayudar.

Saludos

marodal · #11 (**permalink**) 21/11/2013, 01:52

Ya lo he solucionado. Resulta que había dividido la pagina en contenedores. La suma de los porcentajes de dos contenedores sobrepasaba el 100% de la pagina, por lo que habia un trozo extra que se mostraba al hacer scroll con el ratón.

Ya está solucionado.

Muchas gracias