[SOLUCIONADO] "recortar" scroll del navegador

JavierCS2007- · #1 (**permalink**) 05/08/2013, 18:05

Buenas foreros.

Existe alguna manera de "recortar" la longitud del scroll del navegador?

Supongamos que el body heigth de una web es de 1200px.
Cuando pongo overflow-y:auto; me mostrará los 1200px.

Lo que yo quiero hacer es que, por ejemplo, el scroll del navegador me muestre solo 800px.

Necesito hacer esto pero no tengo idea como!
Algun experto que pueda ayudarme???

Gracias anticipadas por las respuestas.
Saludos!

quimfv · #2 (**permalink**) 06/08/2013, 05:57

Con que objetivo queres hacer eso? Lo digo para pensar en alternativas.

Si es para ocultar parte de la pagina, no consigues mucha seguridad ya que el codigo funte seguirá accesible....

JavierCS2007- · #3 (**permalink**) 06/08/2013, 07:13

Hola Quim, buenos días.

Te explico un poco mas.

Es solo para ocultar un espacio vacío de unos 400 px, que sobra debajo del footer de la pagina (si no consigo hacerlo con JS voy a tener que hacer todo practicamente de nuevo

)

Esto solo aparece cuando se ve la página con baja resolución y se activa el
overflow-y:auto; (oirinalmente el valor esta en hidden y el scroll obviamente no aparece).

Se que JS tiene varias opciones interesantes para manejar éste tipo de cosas, pero no soy experto en JS lamentablemente y no tengo ni idea como hacerlo.

Se te ocurre algo?

Gracias y saludos.

quimfv · #4 (**permalink**) 07/08/2013, 01:32

Parece mas un tema de css.

Solo se me ocurre que detectes la resolución del susuario y modifiques lo que sea del css.

http://www.desarrolloweb.com/articul...avascript.html

JavierCS2007- · #5 (**permalink**) 07/08/2013, 09:00

Si, eso ya lo hago.
Funciona todo perfecto, solo cuando detecto una resolución muy baja activo el scroll y aparecen esos pixeles vacíos que quiero corregir con JS.

Estoy casi seguro que se puede hacer con JS, pero no se como.

Tendria que poderse modificar con algo como:

document.body.clientHeigh
document.body.scrollheight

Alguno con experiencia en JS que pueda darme una mano?
Algo que me recorte el tamaño del BODY o del scroll de 100% a 80%.

Por favor que me esta volviendo loco ese detalle!

quimfv · #6 (**permalink**) 08/08/2013, 00:56

Y cambiar el CSS que genera esos pixeles de mas...

Es decir creas dos classes una para pantallas normales y otro para las pequeñas y en funcion de la resolución usas una u otra.

Código Javascript:

Ver originaldocument.getElementById("MyElement").className = "MyClass";

JavierCS2007- · #7 (**permalink**) 08/08/2013, 09:59

Tendría que hacer un montón de modificaciones, hay muchas capas, divs ocultos, etc etc.
Por eso estoy buscando alguna solución en javascript. No quiero rediseñar todo solo por esto.

Estuve intentando entender algunas otras cosas de JS como

document.body.offsetHeight
window.innerHeight
window.outerHeight

Pero lamentablemente mi poca experiencia con JS no me deja dar en el clavo y hallar la solución.

Se te ocurre algo por éste lado?

Espero que alguien pueda ayudarme.

Saludos.

JavierCS2007- · #8 (**permalink**) 12/08/2013, 10:25

A alguien se le ocurre alguna solución con Javascript ?

patilanz · #9 (**permalink**) 12/08/2013, 23:58

Puedes detectar donde se encuentra el scroll del usuario y cuando llegue a los 800px no le permitas seguir volviendo le para atras osea si avanza cuando esta en los 800px o mas le vuelves a 800px

JavierCS2007- · #10 (**permalink**) 13/08/2013, 11:39

Estuve investigando un poco sobre lo que dijiste...
Te hago unas preguntas:

1) Eso lo controlaría con window.scrollBy(y) ?
2) Como tengo que hacer para que la función se ejecute cada vez que movés el scroll Y?
3) No hay manera de cambiarle el tamaño de pixeles al scroll Y, independientemente del tamaño del body?

Gracias patilanz.

Saludos.

patilanz · #11 (**permalink**) 13/08/2013, 15:51

Aqui tienes un ejemplo.

http://jsfiddle.net/patilanz/evase/

No me quedo como esperaba.. no me gusta el efecto de volver al usuario, resulta molesto.
Voy a ver otra solución.

Saludos

JavierCS2007- · #12 (**permalink**) 19/08/2013, 13:42

Hola Patilaz, como te va.

Estuve examinando un poco ese ejemplo que dejaste, pero no me funciona.
A vos te funcionó ?

Armé un archivito para hacer pruebas, pero al bajar el scroll mas alla de 1200px baja normalmente sin limitarlo en 1200px.

Código:

<html>
<head>

<style type="text/css">

#divprueba { width:10px; height: 1400px; background:red;}

</style>

<script language="JavaScript">


document.onscroll=function(){
	
var scroll=window.pageYOffset||document.documentElement.scrollTop;
	
if(scroll>1200)window.scrollTo(0,1200);
}


</script>

</head>

<body>
<div id="divprueba">  </div>
</body>

</html>

EDIT : ACABO DE AGREGARLE LOS {} DENTRO DEL IF, PERO TAMPOCO FUNCIONA "if(scroll>1200){window.scrollTo(0,1200);}"

Saludos y gracias.

patilanz · #13 (**permalink**) 19/08/2013, 14:04

Hola bueno lo del ejemplo anterior no lo has visto??

Prueba con esto:

http://jsfiddle.net/evase/4/

Aquí funciona pero con algo bastante molesto.

NiciusB · #14 (**permalink**) 19/08/2013, 14:20

Crea un div para meter en contenido y ponle la altura que quieras y overflow: auto.
Se puede hacer con js fácilmente

JavierCS2007- · #15 (**permalink**) 19/08/2013, 14:26

éste si me funciona, ahora se frena cuando bajas el scroll. (Y)

EDIT: UPS! no funciona en INTERNET EXPLORER. Probé cambiando document.onscroll=function() por window.onscroll=function() pero tampoco anda en IE.
Lo probaste el IE ?

Patilanz, no se te ocurre una manera de cambiarle el tamaño de pixeles al scroll Y, para dejarlo visualmente mas corto? (independientemente del tamaño que tenga el del body).

Igualmente ésta alternativa que me acercaste me va a servir para implementarla de emergencia, pero estaría bueno que quede mas estético.

Muchas gracias por dame una mano con ésto, estoy aprendiendo un poco de JS con todo esto :)

Saludos!

Javi

patilanz · #16 (**permalink**) 20/08/2013, 01:23

Cita:

Iniciado por JavierCS2007-

éste si me funciona, ahora se frena cuando bajas el scroll. (Y)

EDIT: UPS! no funciona en INTERNET EXPLORER. Probé cambiando document.onscroll=function() por window.onscroll=function() pero tampoco anda en IE.
Lo probaste el IE ?

Patilanz, no se te ocurre una manera de cambiarle el tamaño de pixeles al scroll Y, para dejarlo visualmente mas corto? (independientemente del tamaño que tenga el del body).

Igualmente ésta alternativa que me acercaste me va a servir para implementarla de emergencia, pero estaría bueno que quede mas estético.

Muchas gracias por dame una mano con ésto, estoy aprendiendo un poco de JS con todo esto :)

Saludos!

Javi

Este funciona con ie 8 los demas no los he probado:

Código Javascript:

Ver original//ALGO DE TEXTO
var t='';
for(var i=0;i<100;i++){
    var ran=Math.floor(Math.random()*6);
    t+='<h'+ran+'>ALGO DE TEXTO</h'+ran+'> <BR />';
}
document.getElementsByTagName('font')[0].innerHTML=t;
if(typeof document.addEventListener!='undefined'){
    document.addEventListener('scroll',scrolling,false);
}else{
    window.onscroll=scrolling;
}
function scrolling(){
    var scroll=window.pageYOffset||document.documentElement.scrollTop;
    if(scroll>1200){setTimeout('window.scrollTo(0,1200)',1);}
}

Voy a buscar otra alternativa pero lo unico que se me ocurre es crear un div en el lugar que no quieres que se muestre y asignar le la propiedad de display="none"

Saludos

JavierCS2007- · #17 (**permalink**) 20/08/2013, 14:25

Hay una cosa que me está volviendo loco y no entiendo porque.

El JSfiddle que pasaste - http://jsfiddle.net/evase/4/ - funciona bien inclusive para IE9 si lo pruebo desde tu link (solo que hace ese "efecto molesto" que mencionaste), pero no logro hacerlo funcionar para IE9 en mi archivito de pruebas.

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
#divprueba { width:10px; height: 6400px; background:red;}
</style>

<script language="JavaScript">
document.onscroll=function(){	
var scroll=window.pageYOffset||document.body.scrollTop;
if(scroll>1200){window.scrollTo(0,1200);}
}
</script>
</head>

<body>
<div id="divprueba">  </div>
</body>

</html>

Porqué desde tu link funciona también para IE9 y en éste archivo no?

Saludos.

Javi.

patilanz · #18 (**permalink**) 21/08/2013, 00:32

El código javascript del mensaje anterior funciona con ie8. Prueba lo con ie9

Saludos

JavierCS2007- · #19 (**permalink**) 21/08/2013, 13:24

Probé el último script que dejaste, pero no me muestra siquiera "ALGO DE TEXTO".
Tiene algunas líneas que superan mis conocimientos de JS y no se que está mal en ese último.

Código:

<html>
<head>
<script language="JavaScript">

    //ALGO DE TEXTO
    var t='';
    for(var i=0;i<100;i++){
        var ran=Math.floor(Math.random()*6);
        t+='<h'+ran+'>ALGO DE TEXTO</h'+ran+'> <BR />';
    }
    document.getElementsByTagName('font')[0].innerHTML=t;
    if(typeof document.addEventListener!='undefined'){
        document.addEventListener('scroll',scrolling,false);
    }else{
        window.onscroll=scrolling;
    }
    function scrolling(){
        var scroll=window.pageYOffset||document.documentElement.scrollTop;
        if(scroll>1200){setTimeout('window.scrollTo(0,1200)',1);}
    }

</script>
</head>

<body>
<font> </font>
</body>

</html>

patilanz · #20 (**permalink**) 21/08/2013, 13:41

Bueno creo que te falta agregar onload=function(){...}

O si no pon el tag script al final del body
Dime lo que no entiendes?

JavierCS2007- · #21 (**permalink**) 22/08/2013, 14:43

Este ultimo no funciona en IE9.

Hay que hacer incapié en éste, que fue el único que funcionó en todos los navegadores:

Código:

//ALGO DE TEXTO
var t='';
for(var i=0;i<100;i++){
	var ran=Math.floor(Math.random()*6);
    t+='<h'+ran+'>ALGO DE TEXTO</h'+ran+'> <BR />';
}
document.getElementsByTagName('font')[0].innerHTML=t;
document.onscroll=function(){
	var scroll=window.pageYOffset||document.documentElement.scrollTop;
	if(scroll>1200)window.scrollTo(0,1200);
}

El problema es que funciona solo desde tu link en IE9 (http://jsfiddle.net/evase/4/)

Cuando lo pongo en una pagina htm asi:

Código:

<html>
<head>
<script type="text/javascript">
//ALGO DE TEXTO
var t='';
for(var i=0;i<100;i++){
var ran=Math.floor(Math.random()*6);
t+='<h'+ran+'>ALGO DE TEXTO</h'+ran+'> <BR />';
}

onload=function(){

document.getElementsByTagName('font')[0].innerHTML=t;
document.onscroll=function(){
var scroll=window.pageYOffset||document.documentElement.scrollTop;
if(scroll>1200)window.scrollTo(0,1200);
}

}
</script>
</head>
<body>
<font> </font>
</body>
</html>

el scroll se va hasta abajo y no se frena!

(en IE9 en TODOS los demas navegadores limita bien el scroll)

no entiendo porque si lo copié identico del tuyo!
http://jsfiddle.net/evase/4/ -> ahi si funciona en Internet explorer 9

please help me Patilanz !
Saludos y gracias.

patilanz · #22 (**permalink**) 23/08/2013, 02:34

Ahora funciona:

Código Javascript:

Ver original<html>
<head>
<script language="JavaScript">
onload=function(){
    //ALGO DE TEXTO
    var t='';
    for(var i=0;i<100;i++){
        var ran=Math.floor(Math.random()*6);
        t+='<h'+ran+'>ALGO DE TEXTO</h'+ran+'> <BR />';
    }
    document.getElementsByTagName('font')[0].innerHTML=t;
    if(typeof document.addEventListener!='undefined'){
        document.addEventListener('scroll',scrolling,false);
    }else{
        window.onscroll=scrolling;
    }
    function scrolling(){
        var doc = document.documentElement, body = document.body;
        var scroll = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
        if(scroll>1200){setTimeout('window.scrollTo(0,1200)',1);}
    }
}
</script>
</head>
 
<body>
<font> </font>
</body>
 
</html>

JavierCS2007- · #23 (**permalink**) 23/08/2013, 13:49

Parece que ahora si diste en el clavo

Ya que estoy te pregunto algo (para seguir aprendiendo)

que es lo que hace ésta parte del código?

Código:

if(typeof document.addEventListener!='undefined'){
            document.addEventListener('scroll',scrolling,false);
        }else{
            window.onscroll=scrolling;
        }

patilanz · #24 (**permalink**) 23/08/2013, 14:49

Bueno basicamente el operador typeof esta aqui: http://www.javascriptkit.com/javatut...minevar2.shtml

devuelve undefined si la propiedad addEventListener de document no esta definida. No esta soportada por el navegador.
En este caso utiliza directamente onscroll para asignar el evento.

Creo que es opcional pero por si acaso lo puse. Para mas compatibilidad..
Bueno... que tema mas largo :D

JavierCS2007- · #25 (**permalink**) 26/08/2013, 15:10

Buenísimo, ahora entiendo para que se usa el typeof de js.

Marco el thread como solucionado.

Abrazo patilanz!