javascript - ocultar - ¿Cómo desplazarse dentro de un div oculto de desbordamiento a un cierto elemento actualmente invisible?

mostrar y ocultar texto en html

Question

Tengo una lista de elementos dentro de un div oculto de desbordamiento. Así que no todos los elementos son visibles. Ahora, si un elemento se activa, debería hacerse visible dentro de la div.

¿Cómo me desplazo al elemento activo usando jQuery?

Es simplemente una conveniencia que el último elemento tenga la clase activa. Se alternará dinámicamente.

 var scrollToEl = $("div.element.active");
 console.log(zoomToEl);

 #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;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="wrapper" class="sidebar">
    <div id="sidebar">
      <div class="element" data-slide-id="0">a
      </div>
      <div class="element" data-slide-id="1">b
      </div>
      <div class="element" data-slide-id="2">c
      </div>
      <div class="element" data-slide-id="3">d
      </div>
      <div class="element" data-slide-id="4">e
      </div>
      <div class="element" data-slide-id="5">f
      </div>
      <div class="element" data-slide-id="6">g
      </div>
      <div class="element active" data-slide-id="7">h
      </div>
    </div>
  </div>
</div>

El elemento que debe hacerse visible:

var scrollToEl = $("div.element.active");

Answer 1

Puede establecer que el scrollTop de scrollTop del div contenedor se encuentre en la top de la position del elemento activo.

$("#wrapper").scrollTop($("#wrapper").scrollTop() + $("div.element.active").position().top);

DEMO

Answer 2

Quizás estés buscando el método scrollIntoView .

scrollToEl[0].scrollIntoView();

DEMO: http://jsfiddle.net/yuFk5/14/