高さが変更されたときにスクロール可能なオーバーフローを作成しますか？

ボタンをクリックした後に画面にレンダリングされるコンテンツが多い場合は、単にoverflow-y: scrollを作成します。上記apiFunction.increaseSize関数呼び出しで、私は上記のHTMLに示されている#hit-templateに表示される項目の数を増やす高さが変更されたときにスクロール可能なオーバーフローを作成しますか？

$(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>

：ここに私のコードです。 renderHits関数は、APIによって返されるコンテンツに基づいて2つの .hit個のdivを追加します。コンテンツが表示されているとき、私は単に .right-columnを overflow-y: scrollable（元々はスクロールできないとき）にしたいと思っています。私は right-columnのサイズを拡張したくないのですが、むしろ全体をスクロール可能にするでしょう。これは可能ですか？

出典

2016-11-30 user1871869