如何滾動元素以騰出空間來展開元素

我的頁面中有以下div層次結構！如何滾動元素以騰出空間來展開元素

<div id="bill-list"> 
    <div id="bill-panel"> 
    <!-- Bill --> 
     <div class="bill"> 
     <!-- Bill description - Holds Bill details --> 
     <div class="bill-description"> 
      <div class="bill-info bill-number"><span>000A</span></div> 
      <div class="bill-info table-name"><span>TABLE 78</span></div> 
      <div class="bill-info room-number"><span>A678</span></div> 
          <div class="bill-info amount"><span>76.00 USD</span></div> 
      <div class="bill-remove-icon"></div> 
     </div> 

     <!-- Bill Item list --> 
     <div class="bill-item-list"> 

     <!-- Item : This is a sample element & will be cleared when system loads --> 
     <div class="bill-item"> 

      <!-- Item image --> 
      <div class="bill-item-img"></div> 
      <!-- Item description --> 
      <div class="bill-item-description"> 
      <div class="bill-item-name"> 

      <!-- Item Name --> 
      <p class="bill-item-name-left">Normal Cofee</p> 
      <!-- Item Price --> 
      <p class="bill-item-name-right">170.00</p> 
      <div class="clear"></div> 
     </div> 
     <!-- Total item price --> 
     <div class="bill-item-price"> 
     <span>170.00 USD</span> 
     </div> 

     <!-- Item Quantity --> 
     <div class="bill-item-amount"> 
     <span>1</span> 
    </div> 

    </div> 
    <!-- Increas & Decrease item Quantity --> 
    <div class="bill-amount-selection"> 
    <a class="amount-increase" href="#"></a> 
    <a class="amount-decrease" href="#"></a> 
    </div> 
    </div> 

    <!-- Remove bill link --> 
    <div class="item-drop-point"></div> 
    </div> 
    </div> 
    </div>      

</div>

我正在設計一個web應用程序，我用jQuery加載賬單並創建每個賬單。所以我創建了賬單的每個元素並將它們追加到賬單面板中！我已經使用以下代碼啓用了賬單列表的滾動功能。我已經使用dragscroller作爲滾動插件。

$('#bill-list').dragscrollable({dragSelector: '#bill-panel', acceptPropagatedEvent: true});

而該法案有它自己的點擊事件，我使用jQuery滑動切換展開帳單。

$(document).on('click',".bill-description",function() 
{ 
    //close all bills 
    $(".bill-item-list").not($(this).next(".bill-item-list")).slideUp(600); 
    //open the clicked bills 
    $(this).next(".bill-item-list").slideToggle(600); 

});

上述代碼關閉該打開並且展開點擊紙幣的任何其它元件。以下是用於元素的CSS。

#bill-list { 
    max-height: 581px; 
    overflow: hidden; 
} 
    #bill-panel { 
    max-height: 575px; 
} 
.bill { 
    width: 100%; 
    margin-top: 2px; 
} 
.bill-description { 
    height: 30px; 
    font-family: MyriadProReg; 
    background-color: rgb(214, 214, 214); 
    cursor: pointer; 
}

所有這些效果都能正常工作。問題是當我展開位於帳單面板底部的元素時，它會展開，但我必須手動滾動才能查看展開的部分。我不知道如何解決它！

我需要的是幫助做到以下幾點。有一張可以滾動的賬單清單。每張賬單都有大約5個賬單項目。並且當我在票據面板底部展開一個元素時，票據應自動滾動以顯示擴展票據。

enter image description here