ScrollTop/ScrollLeft

ScrollTop/ScrollLeft

For some reason I'm having a difficult time getting scrollTop and scrollLeft to work properly.  My HTML code is this:
  1. <div id="map_container" style="overflow: auto-scroll">
  2. <canvas id="map_data" ></canvas>
  3. </div>
My Javascript code resizes map_container to fill up a portion of the browser window.  When my map is drawn into map_data I want to scroll to a particular spot in it and that is where the problem occurs.  The following is a static example that doesn't work:
  1. $("#map_container").scrollTop(200);
map_container doesn't scroll. Yet if I scroll it with my mouse and call the scrollTo method, it shows the current scroll position.

Anyone have any ideas?