title: How to scroll within an overflow hidden div to a certain currently invisible element?
body: <p>I have a list of elements within a overflow hidden div. So not all elements are visible. Now, if an element gets activated, it should become visible within the div.</p>
  
  <p>How do I scroll to the active element using jQuery?</p>
  
  <p>It's merely a convenience that the last element has the active class. It will be toggled dynamically.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var scrollToEl = $("div.element.active");
   console.log(zoomToEl);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> #main,
   #sidebar {
     height: 200px;
   }
   #wrapper {
     width: 190px;
     float: left;
     background: grey;
     overflow: auto;
     overflow-x: hidden;
   }
   #sidebar div.element {
     height: 150px;
     width: 150px;
     background-color: green;
     margin-bottom: 10px;
   }
   #sidebar div.element.active {
     background-color: red;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="main"&gt;
    &lt;div id="wrapper" class="sidebar"&gt;
      &lt;div id="sidebar"&gt;
        &lt;div class="element" data-slide-id="0"&gt;a
        &lt;/div&gt;
        &lt;div class="element" data-slide-id="1"&gt;b
        &lt;/div&gt;
        &lt;div class="element" data-slide-id="2"&gt;c
        &lt;/div&gt;
        &lt;div class="element" data-slide-id="3"&gt;d
        &lt;/div&gt;
        &lt;div class="element" data-slide-id="4"&gt;e
        &lt;/div&gt;
        &lt;div class="element" data-slide-id="5"&gt;f
        &lt;/div&gt;
        &lt;div class="element" data-slide-id="6"&gt;g
        &lt;/div&gt;
        &lt;div class="element active" data-slide-id="7"&gt;h
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The element that should become visible:</p>
  
  <pre><code>var scrollToEl = $("div.element.active");
  </code></pre>