高度变化时创建可滚动的 overflow-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 中显示了。 renderHits 函数将根据 API 返回的内容再添加 2 个 .hit div。显示内容时，我只是想让我的 .right-column 成为 overflow-y: scrollable（最初它不可滚动）。我不想扩展 right-column 的大小，而是想让整个内容都可以滚动。这可能吗？

Answer 1

为了获得 'overflow: scroll'，您必须首先确保 div 的高度或最大高度应该是固定的。您的其余代码没问题。

高度变化时创建可滚动的 overflow-y？

Creating scrollable overflow-y when height changes?

html

css

jquery

overflow