title: How to get the elements in the visible area using JQuery
body: <p>I need to know how I can get the first element that is visible in the browser view.</p>
  
  <p>I am implementing a custom scroller. however when the user uses the mouse to scroll my custom scroller messes up. I need to find the visible divs in the visible area in the browser after scrolling, so I will be able to scroll to the right element.</p>
  
  <p>here is the structure of my page:</p>
  
  <pre><code>&lt;div class="page"&gt;
  
      &lt;div id="scroller" class="news-scroller"&gt;
           &lt;div &gt;&lt;span id="up"&gt;&lt;/span&gt;&lt;/div&gt;
           &lt;div &gt;&lt;span id="down"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="news"&gt;
      &lt;/div&gt;
      &lt;div class="news"&gt;
      &lt;/div&gt;
      ....
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using the scroller #up and #down to scroll to the previous or next div.news. (I use scrollTo plugin) but after using the mouse for scroll I need to understand which div.news is the first visible element in the page to reset my custom scroller.</p>
  
  <p>Here is my code in case it helps:</p>
  
  <pre><code>var current = $(".news").eq(0);
  
  $("#down").click(function(){
      if(current.next().size() &gt; 0)
      {
          current = current.next();
          $.scrollTo("#"+current.attr("id"), 800);     
  
      }
      else  if(current.next().size() &lt;= 0)
      {
          return
      }
  });
  
  $("#up").click(function(){
      if(current.prev().size() &gt; 0)
      {
          current=current.prev();
          $.scrollTo("#"+current.attr("id"), 800);
      }
      else  if(current.prev().size() &lt;= 0)
      {
          return;
  }
  });
  </code></pre>
  
  <p>and <a href="http://xycomm.linkmesrl.com/site/news" rel="nofollow">here</a> is the example page.</p>