Element Scroller for Scriptaculous

This effect for Script.aculo.us can scroll the element it self. For exaple, if you have a div with overflow: auto; and it's scrollable, with this effect you can scroll the div to a specific position.

How to use
Toggle highlightingCode
  1.  
  2. new Effect.ScrollVertical(element, options);
  3. new Effect.ScrollHorizontal(element, options);
  4.  


The 2 effects are almost the same, except the first one scrolls vertical, and the other scrolls horizontal, in case you didn't noticed ;)

Parameters
element
The object or the ID of the elemt you want to scroll.

options
An object with options, see below

Options
A list of default options can be found here:
http://wiki.script.aculo.us/scriptaculous/show/CoreEffects

Option to
This specifies the pixel number where to scroll to. if you don't set the option from it starts scrolling from the current position. So if you want to scroll to a specific position, set from to 0.

Option from
The specifies the pixel number where to scroll from.

Download Download script as zip

Tag Tags: Scriptaculous Javascript

Source

  • elementscroller.js
  1. /**
  2.  * Accordion Effect for Script.aculo.us
  3.  * Created by Lucas van Dijk
  4.  * http://www.return1.net
  5.  *
  6.  * Copyright 2007 by Lucas van Dijk
  7.  *
  8.  * Permission is hereby granted, free of charge, to any person obtaining
  9.  * a copy of this software and associated documentation files (the
  10.  * "Software"), to deal in the Software without restriction, including
  11.  * without limitation the rights to use, copy, modify, merge, publish,
  12.  * distribute, sublicense, and/or sell copies of the Software, and to
  13.  * permit persons to whom the Software is furnished to do so, subject to
  14.  * the following conditions:
  15.  *
  16.  * The above copyright notice and this permission notice shall be
  17.  * included in all copies or substantial portions of the Software.
  18.  */
  19.  
  20. Effect.ScrollVertical = Class.create();
  21.  
  22. Object.extend(Object.extend(Effect.ScrollVertical.prototype, Effect.Base.prototype),
  23. {
  24.     initialize: function(element)
  25.     {
  26.         if(typeof element == "string")
  27.         {      
  28.             this.element = $(element);
  29.             if(!this.element)
  30.             {
  31.                 throw(Effect._elementDoesNotExistError);
  32.             }
  33.         }
  34.        
  35.         var options = Object.extend({
  36.             from: this.element.scrollTop || 0,
  37.             to:   this.element.scrollHeight
  38.         }, arguments[1] || {});
  39.        
  40.         options.to = options.to == this.element.scrollHeight ? options.to : options.from + options.to;
  41.        
  42.         this.start(options);
  43.     },
  44.    
  45.     update: function(position)
  46.     {
  47.         this.element.scrollTop = position;
  48.     }
  49. });
  50.  
  51. Effect.ScrollHorizontal = Class.create();
  52.  
  53. Object.extend(Object.extend(Effect.ScrollHorizontal.prototype, Effect.Base.prototype),
  54. {
  55.     initialize: function(element)
  56.     {
  57.         if(typeof element == "string")
  58.         {      
  59.             this.element = $(element);
  60.             if(!this.element)
  61.             {
  62.                 throw(Effect._elementDoesNotExistError);
  63.             }
  64.         }
  65.        
  66.         var options = Object.extend({
  67.             from: this.element.scrollLeft || 0,
  68.             to:   this.element.scrollWidth
  69.         }, arguments[1] || {});
  70.        
  71.         this.start(options);
  72.     },
  73.    
  74.     update: function(position)
  75.     {
  76.         this.element.scrollLeft = position;
  77.     }
  78. });
  79.