[SOLUCIONADO] Quitar Scroll de body,html

madman_18 · #1 (**permalink**) 24/06/2013, 05:20

Buenos días!

Quería preguntaros por un problemilla que estoy teniendo:

Mi página web tiene en total 4 bloques los cuales tienen un

Código CSS:

Ver originalwidth:100%;
height:100%;

para que ocupen toda la página.

La estructura que tiene la web es de todo el contenido en una página, por lo que uso los anclas para ir al contenido en función de lo que quieran ver.

Ahora me gustaría quitar el scroll del body, pero en cuanto le pongo el

Código CSS:

Ver originaloverflow: hidden;

se le va la cabeza a los enlaces: algunas veces funciona, pulso en una sección y me va a otra....

¿Habría alguna forma de quitar el scroll del body y que no afecte al funcionamiento? Porque no tengo ni idea de por qué al hacer eso, me casca...

Un saludo y gracias!!!

pzin · #2 (**permalink**) 24/06/2013, 06:20

Pues habría ver por qué casca. Porque para eliminar las barras de desplazamiento bastaría con eso. Luego hace falta ver más código, o la URL.

madman_18 · #3 (**permalink**) 24/06/2013, 07:01

Ok, os pongo el código HTML y el CSS:

Estoy probando con un código menos abultado que el de la página para comprobar a ver qué le ocurre

Código HTML:

Ver original<html>
<body>
<header>
<ul>
<li><a href=#bloque1>Bloque 1 </a></li>
<li><a href=#bloque2>Bloque 2 </a></li>
<li><a href=#bloque3>Bloque 3 </a></li>
</ul>
</header>
<section class=contenedor-1 id=bloque1>adsfasdf</section>
<section class=contenedor-2 id=bloque2>asdf3r324</section>
<section class=contenedor-3 id=bloque3>gf31w</section>
</body>
</html>

Código CSS:

Ver originalbody,html{
    width:100%;
    height:100%;
    font-family: 'Gabriela',san-serif;
    background: #FAFAFA;
    overflow:hidden;
}
.contenedor-1,.contenedor-2{
    width:100%;
    min-height: 100%;
    height:auto;
}
.contenedor-1{
    background: #FAFAFA;
    padding: 20px 0;
}
.contenedor-2{
    background: 
        url('imagenes/sombra_sup.png') repeat-x top left,
        url('imagenes/sombra_sup.png') repeat-x bottom left #F2F2F2;
}

madman_18 · #4 (**permalink**) 24/06/2013, 07:34

Ya he encontrado el problema...no me está viniendo de CSS, sino de algo que pensaba que no tenía y se ve que al deshacer algunos cambios, quité el comentario de esa línea.

Mi fallo viene de jQuery (tenéis que mover el tema o tengo que crear uno nuevo?), con una función que me facilitaron en este foro:

Código Javascript:

Ver originalfunction scrollSuave(id_menu){
//id_menu es el id del menu al que quiero asociarlo
    var asociaMenu = "#"+id_menu+" ul a[href*=#]";
    
    $(asociaMenu).click(function() {
 
     if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'')
         && location.hostname === this.hostname) {
 
             var $target = $(this.hash);
 
             $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
 
             if ($target.length) {
 
                 var targetOffset = $target.offset().top;
 
                 $('html,body').animate({scrollTop: targetOffset}, 1000);
 
                 return false;
 
            }
 
       }
 
   });
}

En cuanto asocio dicho código, es cuando ya me falla.

Siento la pérdida de tiempo pzin ;) ;) ;) pero pensaba que me vendría todo de CSS