title: How to scroll through a div by dragging and not by using the scroll bars
body: <p>I am working on a project that uses a touch-screen interface.  I have a div inside of a smaller div, so the smaller div has scroll bars to access the rest of the first div. Here is the basic code for it.</p>
  
  <pre><code>.div1{
        height: 100px;
        width: 100px;
  }
  .div2{
        height: 50px;
        width: 50px;
  }
  </code></pre>
  
  <p>and the html is:</p>
  
  <pre><code>&lt;div id = "div2" class="div2"&gt;
   &lt;div id="div1" class="div1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using javascript, I would like to be able to scroll through div2 by pressing (since it is a touch screen) an unoccupied part of the screen and dragging along the div.  Basically, the scroll feature would behave the way google maps does when you click and drag in it. Can anybody help me with this? Thanks in advance!</p>
  
  <h2>Note</h2>
  
  <p>In terms of mouse actions, pressing is equivalent to clicking here, just to be clear.  I am also working in Firefox only, so cross-browser compatibility is not an issue. </p>