title: Infinite Scrollable Div with Ajax loaded Content?
body: <p>I want to implement a technique called scrollable div in <a href="http://www.gwtproject.org/" rel="nofollow noreferrer">GWT</a>. What I am trying to do is the following. 
  If a user is on my page he can only see the viewport (green box in the image). All DOM elements that are in this viewport are visible to the user on page load. Alle DOM elements that are not on the viewport have not been loaded after a page has been loaded on page load (blue boxes in the image). </p>
  
  <p>If the user drag and move the viewport, all dom elements become visible which come onto the viewport. If they are on the viewport they will be loaded via ajax.</p>
  
  <p>The user can zoom in and out the viewport to make it bigger and smaller. Also, if elements that are invisible to the user and thus not loaded yet become visible, than they have to be loaded via ajax and displayed on the viewport.</p>
  
  <p>How do I have to implement this with GWT?</p>
  
  <p>If the user loads the page it looks like the following image: </p>
  
  <p><img src="https://i.stack.imgur.com/BXf2t.jpg" alt="enter image description here"></p>
  
  <p>The user can drag and move the viewport to 8 directions. These are top, top right, right, right bottom, bottom, bottom left, left and top left. The following image shows a movement to the left.
  When the viewport moves new content should be loaded with ajax.</p>
  
  <p><img src="https://i.stack.imgur.com/jbtYf.jpg" alt="enter image description here"></p>
  
  <p>The viewport can also be zoomed in. In this case also new content should be loaded.</p>
  
  <p><img src="https://i.stack.imgur.com/H82VB.jpg" alt="enter image description here"></p>
  
  <p>The viewport can also be zoomed out. Note that the viewport must be of fixed dimensions. Only the content should be zoomable.</p>
  
  <p><img src="https://i.stack.imgur.com/kCEFn.jpg" alt="enter image description here"></p>