如何滚动元素以腾出空间来展开元素

我的页面中有以下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