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函数调用的上方，我增加了上面HTML中显示的#hit-template中显示的项目数。 renderHits函数将根据API返回的内容再添加2个.hit div。显示内容后，我只想让我的.right-column成为overflow-y: scrollable（原来它不可滚动时）。我不想扩展right-column的大小，而是希望整个事情可以滚动。这可能吗？

Answer 1

为了有'溢出：滚动'，你必须首先确保你的div的高度或最大高度应该是固定的。你的其余代码很好。

高度变化时创建可滚动溢出？

1 个答案: