As you'll see next, I also modified it so the page could handle more than one scroller, even with different sizes, as that was another requirement for that website. So I created a function that added a counter to an array and we pass as arguments the index of that instance and the size for that scroller. The script just does the rest.

I think it's quite easy to implement, you need:

• A block of style to define how to see the contents of the scroller area if dhtml is not applied

  <link rel="stylesheet" type="text/css" href="scroller.css">
  		

• Link the three javascript files either in the head or before the scrolling content itself (as examples in this page):

  <script type="text/javascript" src="dom-drag.js"></script>
  
  <script type="text/javascript" src="ypSimpleScrollC.js"></script>
  <script type="text/javascript" src="scroller.js"></script>
  		

• Initialise the script, also in the head or before the scrolling content itself. To this end we will use the function instantiateScroller as follows:

  
  <script type="text/javascript">
  instantiateScroller(0, "scroll0", 7, 0, 300, 150, 150);
  </script>
  		

  The argument values refer to:

  count

  counter for the number of scroller, starting at zero.

  id

  part of the id that references that scroller; simply use "scroll" + the previous count.

  left

  content left position inside container.

  top

  content top position inside container.

  width

  container width.

  height

  container height.

  speed

  scroller speed.

• Save the three images (up, drag y down) in the same directory of the scripts.
• Define the boxes that we will use as content and container. Basically we need three boxes, only needing to use names according to the next notation: (root_ scroll_Container and scroll_Content); just replace the _ by the count number of each scroller (starting by zero):

  <div class="root" id="root0">
  <div class="scrollContainer" id="scroll0Container">
  <div class="scrollContent" id="scroll0Content">
  All content will go inside here
  
  </div>
  </div>
  </div>		
  		

Once you accomplish these the script will do the rest for you. You can download the script with all the needed files in raw format from here