Jak przewinąć ukryty element div do pewnego aktualnie niewidocznego elementu?

Question

Mam listę elementów wewnątrz ukrytego elementu div z przepełnieniem. Więc nie wszystkie elementy są widoczne. Teraz, jeśli element zostanie aktywowany, powinien stać się widoczny w div.

Jak przewinąć do aktywnego elementu za pomocą jQuery?

To tylko udogodnienie, że ostatni element ma aktywną klasę. Zostanie przełączony dynamicznie.

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>

Element, który powinien stać się widoczny:

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

Answer 1

Można ustawić scrollTop div otoki być top z position aktywnego elementu.

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

DEMO

Answer 2

Może szukasz scrollIntoView metody.

scrollToEl[0].scrollIntoView(); 

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