[SOLUCIONADO] Evitar Scroll del body en dispositivos móviles

madman_18 · #1 (**permalink**) 03/07/2013, 01:47

Buenos días a todos!

Estoy adaptando una página web a distintos dispositivos pero me estoy enfrentando a un problema...

Mi página tiene en el body un overflow:hidden para que no aparezca el scroll, ahora bien, como el contenido puede ser bastante extenso, seguí el consejo que me disteis por aquí también en poner un contenedor con un height fijo y con scroll.

La cosa está en que cuando pruebo la página, me permite hacer el scroll del body

y no entiendo por qué si el body tiene como propiedad de overflow:hidden

¿alguna idea? Gracias de antemano! ;)

pzin · #2 (**permalink**) 03/07/2013, 03:27

Overflow sólo oculta contenido si el elemento tiene una medidas especificadas. ¿Pusiste esto?

madman_18 · #3 (**permalink**) 03/07/2013, 03:53

Cita:

Iniciado por pzin

Overflow sólo oculta contenido si el elemento tiene una medidas especificadas. ¿Pusiste esto?

Sí, tengo un contenedor (donde meto todo el contenido) y le asigno tanto un width como un height fijo.

Ahí no tengo el problema en sí ya que lo hace bien, lo que no sé qué ocurre en los dispositivos móviles que es como si

Código CSS:

Ver originalbody{overflow:hidden;}

no lo cogiese...

Si voy desplazandome hacia abajo, me va mostrando los divs que en teoría están "ocultos"

pzin · #4 (**permalink**) 03/07/2013, 03:57

Pues en principio debería de ocurrir lo mismo que en un navegador de escritorio.

Pon el código HTML/CSS que estés utilizando, al menos el necesario para reproducir el problema.

madman_18 · #5 (**permalink**) 03/07/2013, 04:06

Cita:

Iniciado por pzin

Pues en principio debería de ocurrir lo mismo que en un navegador de escritorio.

Pon el código HTML/CSS que estés utilizando, al menos el necesario para reproducir el problema.

Me pillabas escribiendolo

Código HTML:

Ver original<html>
<body>
 
<section class="contenedor">
<article class="contenido">
adsfasdfasdf
</article>
</section>
<section class="contenedor">
<article class="contenido">
adsfasdfasdf
</article>
</section>
</body>
</html>

Código CSS:

Ver originalbody{
overflow:hidden;
}
.contenedor{
width:960px;
    min-height: 100%;
    height:auto;
    margin: 0px auto;
    padding: 115px 0 0px 0;
    overflow:auto;
}
.contenido{
    width:100%;
    max-height:650px;
    height:650px;
    overflow: auto;
}

Ahí está lo básico básico...en el @media-queries lo único que hago es variar el width del contenedor y el height del contenido.

Pd: lo que he puesto de texto y demás es ahora mismo de prueba ;)

madman_18 · #6 (**permalink**) 03/07/2013, 04:19

He encontrado algo....., para los móviles tanto body como html tienen que tener overflow:hidden;

Pero ahora tengo un problema....no se por qué, si le pongo el overflow:hidden también al tag html, el efecto jQuery que tengo para mostrar contenido de forma suave, no lo coge....

pzin · #7 (**permalink**) 03/07/2013, 04:20

Cambia tu .contenedor, quítale min-height y height auto y déjalo al 100%:

Código CSS:

Ver original.contenedor{
  width:960px;
  height: 100%;
  margin: 0px auto;
  padding: 115px 0 0px 0;
  overflow:auto;
}

Es que si especificas que la altura mínima sea tanto y que la altura sea automática —que es el valor por defecto por cierto— entonces no hay nada que impida que crezca según el contenido.

madman_18 · #8 (**permalink**) 03/07/2013, 04:28

Gracias pzin ;) en ese aspecto ya funciona.... pero como mencionaba antes, haciendolo así me falla el jQuery que tengo para que desplace los contenidos......... habrá que cambiar de CSS a jQuery el tema del post creo, porque en una primera versión me ocurría lo mismo y no encontraba cómo solucionarlo

pzin · #9 (**permalink**) 03/07/2013, 04:44

Yo haría otra cosa, si me permites.

Pondría un contenedor global y jugaría con la altura.

Código HTML:

Ver original<html>
<body>
  <section>
    <article></article>
    <article></article>
  </section>
</body>
</html>

Código CSS:

Ver originalhtml, body {
  height: 100%;
}
 
body {
  overflow: hidden;
}
 
section {
  height: 200%;
}
 
article {
  height: 50%;
}

El contenedor, section, va a tener la altura de 100% * la cantidad de artículos que hayan, y cada artículo tendrá una altura de 100% / la cantidad de artículos que hayan. Si hubiesen 20 artículos, entonces section mediría 2000% y cada artículo 5%.

Así puedes usar el scroll sin problemas.

madman_18 · #10 (**permalink**) 03/07/2013, 04:53

Cita:

Iniciado por pzin

Yo haría otra cosa, si me permites.

Pondría un contenedor global y jugaría con la altura.

Código HTML:

Ver original<html>
<body>
  <section>
    <article></article>
    <article></article>
  </section>
</body>
</html>

Código CSS:

Ver originalhtml, body {
  height: 100%;
}
 
body {
  overflow: hidden;
}
 
section {
  height: 200%;
}
 
article {
  height: 50%;
}

El contenedor, section, va a tener la altura de 100% * la cantidad de artículos que hayan, y cada artículo tendrá una altura de 100% / la cantidad de artículos que hayan. Si hubiesen 20 artículos, entonces section mediría 2000% y cada artículo 5%.

Así puedes usar el scroll sin problemas.

Interesante..... haré algunas pruebas a ver qué tal funciona

Gracias por la ayuda ;)

madman_18 · #11 (**permalink**) 04/07/2013, 00:08

La verdad es que funciona ahora el scroll sin problemas ;)

Muchas gracias!