Làm cách nào để cuộn trong một div ẩn bị tràn vào một phần tử hiện đang ẩn nào đó?

Question

Tôi có một danh sách các phần tử nằm trong một div ẩn bị tràn. Vì vậy, không phải tất cả các phần tử đều hiển thị. Bây giờ, nếu một phần tử được kích hoạt, nó sẽ trở nên hiển thị trong div.

Làm cách nào để cuộn đến phần tử đang hoạt động bằng jQuery?

Đó chỉ là sự tiện lợi mà phần tử cuối cùng có lớp đang hoạt động. Nó sẽ được chuyển động tự động.

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>

Các yếu tố đó nên trở thành có thể nhìn thấy:

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

Answer 1

Bạn có thể đặt scrollTop của div wrapper là top của position của yếu tố tích cực.

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

DEMO

Answer 2

Có lẽ bạn đang tìm kiếm scrollIntoView phương pháp.

scrollToEl[0].scrollIntoView(); 

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