Hace un tiempo me tocó la desgracia de tener una maqueta de una web en donde, por la forma en que se había desarrollado, no se disponía de demasiado espacio para colocar texto y era necesario colocar en ese espacio las extensas especificaciones de distintos productos. El problema era sencillo: poco espacio para mucho texto.

En primera instancia pensé en colocar iframes o divs con su respectivo overflow:scroll, pero la barrita de scroll no quedaba muy estética que digamos y para peor me quitaba el preciado espacio que tanto necesitaba el texto. Opté entonces por codificar unas pequeñas funciones en JavaScript que dado un ID de un elemento cualquiera, se encarguen de transformar ese elemento en una flecha de scroll y que al posicionarse sobre ellas muevan aquellas capas donde estaban colocados los enormes párrafos.

La solución implementada se puede ver aquí http://www.electronicdock.com/descripcion.php?producto=10 posicionandose por encima de estas flechitas:

Demo de JS Scroll

Por supuesto que no es la solución ideal, pero creo que es una alternativa más que válida para salir del problema, y además proporciona una estética bastante aceptable.

El código puede configurarse para distintas velocidades de movimiento, cosa bastante útil si el contenido de tu capa es muy extenso o si deseas mostrar imágenes. También es posible asignar a una flecha el movimiento de dos capas diferentes, como hago en el index de esa misma página (aunque no se puede ver de momento ya que el contenido de la segunda capa no rebasa sus límites).

Para configurar las flechas y los movimientos no es necesario tocar el código HTML existente; simplemente incluir el JS correspondiente y llamar a las funciones con los parámetros necesarios... el código hará el resto.

El modo de uso es muy sencillo. Primero incluimos el JS con las funciones y luego llamamos a registraScroll de esta manera: registraScroll(IDElementoFlechaAbajo, IDElementoFlechaArriba, IDCapaAMover, VelocidadDeBajada, VelocidadDeSubida):

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="scroll.js"></script>
  2. <script type="text/javascript">
  3. registraScroll(
  4. 'flechaAbajo',
  5. 'flechaArriba',
  6. 'listaNovedades',
  7. 1,
  8. -1
  9. );
  10. registraScroll(
  11. 'flechaAbajo',
  12. 'flechaArriba',
  13. 'listaOfertas',
  14. 1,
  15. -1
  16. );
  17. // flechaAbajo y flechaArriba moveran ambas capas cuando se posicione sobre ellas
  18. </script>

A tus elementos que actúen como flechas les podrás asignar el movimiento de tantas capas como sea necesario. En cuanto a las velocidades, por lo general con "1" el movimiento es relativamente suave, pero para textos muy largos quizá convenga probar con "1.5", "2" o alguna superior.

La desventaja obvia de la utilización de estas funciones es que aquella persona que por X motivo no tenga habilitado JavaScript en su navegador no podrá ver más texto que aquel que se muestre en un comienzo; queda en ustedes realizar una versión del sitio para esas personas brindando un buen nivel de accesibilidad.

Les dejo el código que hace el trabajo pesado:

scroll.js

PLAIN TEXT
JavaScript:
  1. scrollList=new Array();
  2.  
  3. function registraScroll(idAbajo, idArriba, div, velAbajo, velArriba)
  4. {
  5.     if(scrollList[idAbajo]==null) scrollList[idAbajo]=new Array();
  6.     if(scrollList[idArriba]==null) scrollList[idArriba]=new Array();
  7.     scrollList[idAbajo].push(new Array(div, velAbajo));
  8.     scrollList[idArriba].push(new Array(div, velArriba));
  9. }
  10.  
  11. window.onload=inicializar;
  12.  
  13. function getEl(elementId)
  14. {
  15.     return document.getElementById(elementId);
  16. }
  17.  
  18. function inicializar()
  19. {
  20.     for(key in scrollList)
  21.     {
  22.         var elemento=getEl(key);
  23.         elemento.onmouseover=iniciaScroll;
  24.         elemento.onmouseout=detieneScroll;
  25.     }
  26. }
  27.  
  28. function iniciaScroll()
  29. {
  30.     scrollDivs=new Array();
  31.     velDivs=new Array();
  32.     for(key in scrollList[this.id])
  33.     {
  34.         scrollDivs.push(getEl(scrollList[this.id][key][0]));
  35.         velDivs.push(scrollList[this.id][key][1]);
  36.     }
  37.     identificador=setInterval('scrollNow()', 50);
  38. }
  39.  
  40. function detieneScroll()
  41. {
  42.     clearInterval(identificador);
  43. }
  44.  
  45. function scrollNow()
  46. {
  47.     for(key in scrollDivs)
  48.     {
  49.     var desplazamientoActual=scrollDivs[key].scrollTop;
  50.     var nuevoDesplazamiento=desplazamientoActual+velDivs[key];
  51.     scrollDivs[key].scrollTop=nuevoDesplazamiento;
  52.     }
  53. }

Y aquí les dejo un sencillo ejemplo de uso en donde se realiza scroll a dos capas al mismo tiempo con un mismo elemento utilizado como flecha. Observen que la librería tiene el nombre de scroll.js y es incluida en la línea 6 para el correcto funcionamiento del código:

PLAIN TEXT
JavaScript:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Prueba de scroll en capas con JavaScript</title>
  6. <script type="text/javascript" src="scroll.js"></script>
  7. <script type="text/javascript">
  8. registraScroll(
  9. 'flechaAbajo',
  10. 'flechaArriba',
  11. 'listaNovedades',
  12. 1,
  13. -1
  14. );
  15. registraScroll(
  16. 'flechaAbajo',
  17. 'flechaArriba',
  18. 'listaOfertas',
  19. 1,
  20. -1
  21. );
  22. </script>
  23.  
  24. <style type="text/css">
  25. .scroll
  26. {
  27.     width:150px; height:50px; overflow:hidden; border:1px solid #000000;
  28. }
  29.  
  30. .flecha
  31. {
  32.     cursor:pointer;
  33. }
  34. </style>
  35. </head>
  36.  
  37. <body>
  38. <div id="listaNovedades" class="scroll">
  39.     Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
  40.     Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
  41.     Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
  42.     Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
  43. </div>
  44. <br>
  45. <div id="listaOfertas" class="scroll">
  46.     Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
  47.     Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
  48.     Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
  49.     Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
  50. </div>
  51. <br><br>
  52. <div id="flechas">
  53.     <span id="flechaArriba" class="flecha">Arriba</span>
  54.     <br>
  55.     <span id="flechaAbajo" class="flecha">Abajo</span>
  56. </div>
  57. </body>
  58. </html>

Espero le resulte útil a alguien. Cualquier cosilla comenten. Saludos!

Sobre el código y aclaraciones

La licencia del código fuente la puedes ver aquí.