¿cuando yo ocupo esta función window.scrollBy(0,30) creo un scroll en la pagina,pero

jor_0203 · #1 (**permalink**) 22/10/2011, 19:11

¿cuando yo ocupo esta función window.scrollBy(0,30) creo un scroll en la pagina,pero no se como se hace en div?
cuando yo ocupo esta función window.scrollBy(0,30) creo un scroll en la pagina,pero no se como se hace en div
<script type="text/javascript">
function pageScroll() {
window.scrollBy(0,30);
scrolldelay = setTimeout('pageScroll()',800);
}
function stopScroll() {
clearTimeout(scrolldelay);
}
</script>
<body>
<a href="javascript:pageScroll()">Scroll</a…
<a href="javascript:stopScroll()">STOP</a>
</body>
alguien me puede dar un ejemplo o sepa de donde tomarlo
gracias

quiero que el scroll lo tenga en el div
y que yo lo pueda manipular el div con mis botones

Raziel_Ravenheart · #2 (**permalink**) 22/10/2011, 20:26

Para que el scroll lo tenga el div, tienes que utilizar css, con una propiedad que se llama overflow, los valores que acepta overflow, son:

-auto: El navegador selecciona cuando mostrar y cuando no, las barras de desplazamiento, obvio, cuando el contenido del div, sobrepasa su tamaño
-hidden: todo contenido fuera del div, no se ve, y nunca le salen las barras de desplazamiento
-scroll: aunque el contenido ocupe menos espacio que el div, siempre va a tener las barras de desplazamiento

el código sería algo como lo siguiente:

Código HTML:

Ver original<html>
<head>
    <style type="text/css">
        .scrollable {
           width: 400px; /*Este tamaño es solo de referencia*/
           height: 100px; /*Lo mismo con este, es para ver el efecto sin mucho contenido*/
           overflow: auto;
           
           border: 3px #696 groove;
        }
    </style>
</head>
 
<body>
 
<div id="contenedor" class="scrollable" >
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
</div>
 
</body>
</html>

Copia y pega este ejemplo y verás que funciona de maravilla,... si necesitas más ayuda.. pregunta..

Saludos

jor_0203 · #3 (**permalink**) 22/10/2011, 22:18

pero lo que falta son los botones con lo que controlamos que suba y baje el contenido y que la barra no se vea, de todos modos mil gracias

jor_0203 · #4 (**permalink**) 22/10/2011, 22:21

Cita:

Iniciado por Raziel_Ravenheart

Para que el scroll lo tenga el div, tienes que utilizar css, con una propiedad que se llama overflow, los valores que acepta overflow, son:

-auto: El navegador selecciona cuando mostrar y cuando no, las barras de desplazamiento, obvio, cuando el contenido del div, sobrepasa su tamaño
-hidden: todo contenido fuera del div, no se ve, y nunca le salen las barras de desplazamiento
-scroll: aunque el contenido ocupe menos espacio que el div, siempre va a tener las barras de desplazamiento

el código sería algo como lo siguiente:

Código HTML:

Ver original<html>
<head>
    <style type="text/css">
        .scrollable {
           width: 400px; /*Este tamaño es solo de referencia*/
           height: 100px; /*Lo mismo con este, es para ver el efecto sin mucho contenido*/
           overflow: auto;
           
           border: 3px #696 groove;
        }
    </style>
</head>
 
<body>
 
<div id="contenedor" class="scrollable" >
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba<br />
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
contenido, para llenar este espacio de prueba
</div>
 
</body>
</html>

Copia y pega este ejemplo y verás que funciona de maravilla,... si necesitas más ayuda.. pregunta..

Saludos

pero lo que falta son los botones con lo que controlamos que suba y baje el contenido y que la barra no se vea, de todos modos mil gracias

jor_0203 · #5 (**permalink**) 23/10/2011, 03:01

<HTML>
<head>
<script type="text/javascript">
var numero=0;
function aumentar()
{
numero++; //aumenta

document.getElementById ("in").scrollTop =+numero;
//document.getElementById ("in").scrollLeft =+numero; //esto espara ir al lado derecho
}
function disminuir()
{
numero--; // esto disminuye
document.getElementById ("in").scrollTop =+numero;

//document.getElementById ("in").scrollLeft=+numero; //si yo lo quisiera que se vaya de lado izquierdo uso
}
</script>
</head>
<body>
<div id="i"></div>

<div id="in" style="width:200px;height:200px; background:#006600; overflow: hidden;">
El territorio mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmfue descubierto y habitado por grupos de cazadores y recolectores nómadas hace más de 30.000 años. Por miles de años, los habitantes de esta región de América se dedicaron a la cacería y la recolección, hasta que se descubrió la agricultura. En Guilá Naquitz se encontraron los más antiguos restosde la domesticación de varios cultivos,1 aunque la agricultura se desarrolló también en sitios como el valle de Tehuacán y la sierra de Tamaulipas. La domesticación del maíz tuvo lugar alrededor del quinto milenio antes de la era común. A partir de entonces los grupos humanos dependieron cada vez más de los cultivos, hasta que se establecieron las aldeas agrícolas y sedentarias en Mesoamérica.2 Mientras en Mesoamérica la agricultura prosperaba, los pueblos norteños seguían siendo completamente dependientes de la cacería y la recolección.

</div>

<input type="button" value="subir" onClick="aumentar()" />
<input type="button" value="bajar" onClick="disminuir()" />
</body>
</HTML>