JMiur [E]

TinyScroller es un script muy sencillo que no requiere librerías extras y nos permite mostrar mucho contenido en un espacio pequeño tal como normalmente hacemos cuando usamos un contenedor con cierta altura dimensionada y le aplicamos la propiedad overflow para que se pueda ver utilizando una barra de desplazamiento.

El script es realmente pequeño, uno poco más de 50 líneas sin comprimir aunque el ZIP que lo contiene también incluye una versión minimizada.

Lo agregamos como cualquier otro, alojándolo en un servidor o directamente, antes de <head>:

<script type='text/javascript'>
//<![CDATA[
var TINY={};
function T$(id){return document.getElementById(id)}
function T$$$(){return document.all?1:0}
TINY.scroller=function(){
  return{
    init:function(a,c,b,s,d){
      a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0;
      b.style.display='block'; a.style.overflow='hidden';
      var h=a.offsetHeight, t=c.offsetHeight;
      if(t<h){
        b.style.display='none'
      }else{
        a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0;
        s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false};
        s.onselectstart=function(){return false}
      }
      a.l=b.offsetHeight-s.offsetHeight
    },
    st:function(e,f){
      var a=T$(f), s=T$(a.s); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top);
      if(a.mv){this.sp(f)}
      a.mv=function(event){TINY.scroller.mv(event,f)};
      a.sp=function(){TINY.scroller.sp(f)};
      if(T$$$()){
        document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp)
      }else{
        document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1)
      }
      if(a.d){s.className+=' '+a.n}
    },
    mv:function(e,f){
      var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c);
      if(m>=0&&m<a.l){
        s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px'
      }else if(m<0){
        s.style.top=0; c.style.top=0
      }else if(m>a.l){
        s.style.top=a.l+'px'; c.style.top=a.m+'px'
      }
    },
    sp:function(f){
      var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')}
      if(T$$$()){
        document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp)
      }else{
        document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1)
      }
      a.mv=0;
    }
  }
}();
TINY.cursor=function(){
  return{
    top:function(e){
      return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY
    }
  }
}();
//]]>
</script>

Y lo usarmemos de este modo:
<div id="ejemplo-scroll" class="scroll">
  <div id="ejemplo-scrollcontent" class="scrollcontent">
    ....... acá pondremos nuestro contenido .......
  </div>
  <div id="ejemplo-scrollbar" class="scrollbar">
    <div id="ejemplo-scroller" class="scroller"></div>
  </div>
</div>
e inmediantamente debajo, llamamos a la función que en este caso, sería así:
<script type="text/javascript">TINY.scroller.init('ejemplo-scroll','ejemplo-scrollcontent','ejemplo-scrollbar','ejemplo-scroller','buttonclick');</script>
Eso, lo haremos siempre del mismo modo, con la misma sintaxis, colocando en la función los cinco parámetros que son los IDs que hemos elegido:

el ID del contenedor que en este caso llamé ejemplo-scroll
el ID del contenido que llamé ejemplo-scrollcontent
los IDs de lso DIVs auxiliares que mostrarán la barra de desplazamiento y el botón: (ejemplo-scrollbar y ejemplo-scroller)
y la clase de ese botón (buttonclick)

Por último, necesitamos el CSS que es lo que podemos personalizar y que en este caso, rearmé agregando clases par que, de esa forma, pudieran mostrarse con distintos tamaños y detalles gráficos:
<style>

  /* las reglas genéricas */
  .scroll { /* el contenedor */
    overflow: auto;
    position: relative; 
  }
  .scrollcontent { /* el contenido */
    position: absolute;
    z-index: 200;
  }
  .scrollbar { /* la barra de desplazamiento es una imagen */
    background:url(URL_scroll-bg.gif);
    display: none;
    float: right;
    position: relative;
    width: 15px;
    z-index: 100;
  }
  .scroller  { /* el botón de desplazamiento también es una imagen */
    background-color: #CCC;
    background-image: url(URL_scroll-arrows.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 15px;
  }
  .buttonclick { background-color:#BBB; }

  /* y defino los anchos, altos y otros detalles de cada uno de elllos */
  #ejemplo-scroll { /* 
    background-color: #000;
    margin: 0 auto;
    height: 200px; /* el ancho */
    width: 300px; /* el alto */
  }
  #ejemplo-scrollcontent {
    width:275px; /* el ancho del contenedor menos el ancho de la barra de desplazamiento */
  }
  #ejemplo-scrollbar {
    height: 200px; /* el mismo alto que el contenedor */
  }

</style>

Bastaría establecer otros valores para crear otro modelo y usarlo en la misma página:
#otro-scroll{
  background-color: #222;
  border: 2px solid #000;
  height: 270px;
  margin: 0 auto;
  outline: 1px solid #666;
  width: 600px;
}
#otro-scroll{width: 575px;}
#otro-scroll{height: 270px; }

3 comentarios |

Suscribirse a la entradas
 
CERRAR