當高度變化時創建可滾動溢出-y？

Question

我想創建一個overflow-y: scroll只需點擊一個按鈕後在屏幕上呈現更多內容。這裏是我的代碼：

$(document).on('click', '.show-more', function(e) { 
 
    e.preventDefault(); 
 

 
    apiFunction.increaseSize({sizeToIncreaseTo: 2}, function(error, results, state){ 
 
      renderHits(results); 
 
      var rightCol = $("#right-column"); 
 
      rightCol.css('overflow-y', 'scroll'); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="right-column"> 
 
    <div id="hits"></div> 
 
    <div id="pagination"></div> 
 
</div> 
 

 
<script type="text/template" id="hit-template"> 
 
    {{#hits}} 
 
    <div class="hit"> 
 
    <div class="hit-image"> 
 
     <img src="{{ image_url }}" alt="{{ _highlightResult.name.value }}"> 
 
    </div> 
 
    <div class="hit-content"> 
 
     <h3 class="hit-name">{{{ name }}}</h3> 
 
     <span class="stars-count">{{{stars_count}}}</span> 
 
     <span class="stars-empty"> 
 
      <span class="stars">{{{stars_count}}}</span> 
 
     </span> 
 
     <span class="reviews-count">({{{reviews_count}}} Reviews)</span> 
 
     <p class="hit-description">{{{ food_type }}} | {{{ neighborhood }}} | {{ price_range }} </p> 
 
    </div> 
 
    </div> 
 
    {{/hits}} 
 
</script> 
 

 
<!-- Pagination template --> 
 
<script type="text/template" id="pagination-template"> 
 
    <button class="show-more">Show More</button> 
 
</script>

在上面的apiFunction.increaseSize函數調用，我增加在#hit-template顯示的項目我已經在上面的HTML顯示的數量。根據API返回的內容，renderHits函數將再添加2個.hit div。當顯示內容時，我只是想讓我的.right-column一個overflow-y: scrollable（當最初它不滾動）。我不想擴大right-column的大小，但寧願讓整個事物滾動。這可能嗎？

Answer 1

爲了有一個'溢出：滾動'，你必須首先確保你的div的高度或最大高度應該是固定的。其餘的代碼很好。