title: Scrolling a DIV inside a DIV container with Javascript
body: <p>I have a DIV container in which I have a SVG document (bigger than DIV). In this same container I have another DIV (lets call it DIV#2) that moves over my SVG, to help people locate some feature.  When I scroll the container DIV I would like DIV#2 to stay anchored on the same position on my SVG, so as to be coherent my the new position of the selected feature (cf Rect_Follow() function below). </p>
  
  <p>Can someone help me troubleshooting that without the use of jQuery?</p>
  
  <p>Here's a small portion of the code:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt; 
  &lt;!--
      div.SVG_container {
          height:800px;
          width:900px;
          margin-top:250px;
          overflow:scroll;
      }
  
      div.select_div {
          position: absolute;
          height: 98px;
          width: 98px;
          background: #CCF;
          border: 1px solid #AAD;
          text-align: center;
          font-size: 10px;
          border:1px solid black;      
          filter:alpha(opacity=60); /* for IE */
          opacity:0.6; /* CSS3 standard */    
      }   
  --&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML/JavaScript:</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;!-- ... --&gt;
      &lt;script type="text/javascript"&gt;
          function Rect_Follow(obj){
              var rect = document.getElementById('arect');    
              rect.style.top = obj.scrollTop;       
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body bgcolor="white"&gt;
      &lt;div id="DivCont" class="SVG_container" onscroll="Rect_Follow(this)"&gt;
          &lt;div id="arect" name="arect" class="select_div"&gt;&lt;/div&gt;  
          &lt;object id="aSVG" data="out.svg" style="margin-top:0px;overflow:hidden;" /&gt; 
      &lt;/div&gt;
      &lt;!-- ... --&gt;
  &lt;/body&gt;
  </code></pre>