Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] "recortar" scroll del navegador

Estas en el tema de "recortar" scroll del navegador en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/08/2013, 18:05
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
"recortar" scroll del navegador

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!
  #2 (permalink)  
Antiguo 06/08/2013, 05:57
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: "recortar" scroll del navegador

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....
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
  #3 (permalink)  
Antiguo 06/08/2013, 07:13
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

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.
  #4 (permalink)  
Antiguo 07/08/2013, 01:32
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: "recortar" scroll del navegador

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
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
  #5 (permalink)  
Antiguo 07/08/2013, 09:00
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

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!
  #6 (permalink)  
Antiguo 08/08/2013, 00:56
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: "recortar" scroll del navegador

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 original
  1. document.getElementById("MyElement").className = "MyClass";
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
  #7 (permalink)  
Antiguo 08/08/2013, 09:59
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

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.
  #8 (permalink)  
Antiguo 12/08/2013, 10:25
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

A alguien se le ocurre alguna solución con Javascript ?
  #9 (permalink)  
Antiguo 12/08/2013, 23:58
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Respuesta: "recortar" scroll del navegador

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
  #10 (permalink)  
Antiguo 13/08/2013, 11:39
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

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.
  #11 (permalink)  
Antiguo 13/08/2013, 15:51
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Respuesta: "recortar" scroll del navegador

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
  #12 (permalink)  
Antiguo 19/08/2013, 13:42
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

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.

Última edición por JavierCS2007-; 19/08/2013 a las 13:54
  #13 (permalink)  
Antiguo 19/08/2013, 14:04
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Respuesta: "recortar" scroll del navegador

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.
  #14 (permalink)  
Antiguo 19/08/2013, 14:20
 
Fecha de Ingreso: agosto-2013
Ubicación: Galicia
Mensajes: 8
Antigüedad: 10 años, 8 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

Crea un div para meter en contenido y ponle la altura que quieras y overflow: auto.
Se puede hacer con js fácilmente
  #15 (permalink)  
Antiguo 19/08/2013, 14:26
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

é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

Última edición por JavierCS2007-; 19/08/2013 a las 14:44
  #16 (permalink)  
Antiguo 20/08/2013, 01:23
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Respuesta: "recortar" scroll del navegador

Cita:
Iniciado por JavierCS2007- Ver Mensaje
é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
  1. //ALGO DE TEXTO
  2. var t='';
  3. for(var i=0;i<100;i++){
  4.     var ran=Math.floor(Math.random()*6);
  5.     t+='<h'+ran+'>ALGO DE TEXTO</h'+ran+'> <BR />';
  6. }
  7. document.getElementsByTagName('font')[0].innerHTML=t;
  8. if(typeof document.addEventListener!='undefined'){
  9.     document.addEventListener('scroll',scrolling,false);
  10. }else{
  11.     window.onscroll=scrolling;
  12. }
  13. function scrolling(){
  14.     var scroll=window.pageYOffset||document.documentElement.scrollTop;
  15.     if(scroll>1200){setTimeout('window.scrollTo(0,1200)',1);}
  16. }

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
  #17 (permalink)  
Antiguo 20/08/2013, 14:25
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

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.
  #18 (permalink)  
Antiguo 21/08/2013, 00:32
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Respuesta: "recortar" scroll del navegador

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

Saludos
  #19 (permalink)  
Antiguo 21/08/2013, 13:24
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

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>
  #20 (permalink)  
Antiguo 21/08/2013, 13:41
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Respuesta: "recortar" scroll del navegador

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

O si no pon el tag script al final del body
Dime lo que no entiendes?
  #21 (permalink)  
Antiguo 22/08/2013, 14:43
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

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.
  #22 (permalink)  
Antiguo 23/08/2013, 02:34
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Respuesta: "recortar" scroll del navegador

Ahora funciona:

Código Javascript:
Ver original
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4. onload=function(){
  5.     //ALGO DE TEXTO
  6.     var t='';
  7.     for(var i=0;i<100;i++){
  8.         var ran=Math.floor(Math.random()*6);
  9.         t+='<h'+ran+'>ALGO DE TEXTO</h'+ran+'> <BR />';
  10.     }
  11.     document.getElementsByTagName('font')[0].innerHTML=t;
  12.     if(typeof document.addEventListener!='undefined'){
  13.         document.addEventListener('scroll',scrolling,false);
  14.     }else{
  15.         window.onscroll=scrolling;
  16.     }
  17.     function scrolling(){
  18.         var doc = document.documentElement, body = document.body;
  19.         var scroll = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
  20.         if(scroll>1200){setTimeout('window.scrollTo(0,1200)',1);}
  21.     }
  22. }
  23. </script>
  24. </head>
  25.  
  26. <body>
  27. <font> </font>
  28. </body>
  29.  
  30. </html>
  #23 (permalink)  
Antiguo 23/08/2013, 13:49
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

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;
        }
  #24 (permalink)  
Antiguo 23/08/2013, 14:49
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Respuesta: "recortar" scroll del navegador

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
  #25 (permalink)  
Antiguo 26/08/2013, 15:10
 
Fecha de Ingreso: octubre-2007
Ubicación: Capital Federal
Mensajes: 215
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: "recortar" scroll del navegador

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

Marco el thread como solucionado.

Abrazo patilanz!

Etiquetas: navegador, scroll
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:42.