title: scrollLeft works but scrollTop doesn't work
body: <p>I have the following HTML with CSS <code>.container { overflow: scroll; }</code> etc.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;div id="markers"&gt;&lt;/div&gt;
    &lt;img id="map" src="/img/map.jpg"/&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><code>map.jpg</code> is very large and I want to scroll to a fixed position like this:</p>
  
  <pre><code>$(function(){
    console.log($('.container').scrollTop());
    $('.container').scrollTop(1000);
    console.log($('.container').scrollTop());
    console.log($('.container').scrollLeft());
    $('.container').scrollLeft(1750);
    console.log($('.container').scrollLeft());
  });
  </code></pre>
  
  <p><code>scrollLeft</code> works fine but <code>scrollTop</code> doesn't. Below is the console output.</p>
  
  <pre><code>0
  0
  0
  1750
  </code></pre>
  
  <p>I've been searching for half an hour but still don't know how to fix it...</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong> CSS about <code>.container</code> <code>#markers</code> and <code>#map</code></p>
  
  <pre><code>.container { overflow: scroll; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; }
  #map { width: 5000px; max-width: 5000px; height: 2907px; max-height: 2907px; cursor: crosshair; }
  #markers { position: relative; top: 0; left: 0; width: 0; height: 0; margin: 0; padding: 0; }
  </code></pre>