user1871869 user1871869 - 1 month ago 17
CSS Question

Creating scrollable overflow-y when height changes?

I want to create an

overflow-y: scroll
simply when more content is rendered on my screen after clicking a button. Here is my code:

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

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

<script src=""></script>
<div id="right-column">
<div id="hits"></div>
<div id="pagination"></div>

<script type="text/template" id="hit-template">
<div class="hit">
<div class="hit-image">
<img src="{{ image_url }}" alt="{{ }}">
<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 class="reviews-count">({{{reviews_count}}} Reviews)</span>
<p class="hit-description">{{{ food_type }}} | {{{ neighborhood }}} | {{ price_range }} </p>

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

Above in the
function call, I increase the number of items displayed in the
I have shown in the HTML above. The
function will add 2 more
divs based on the content returned by the API. When the content is shown, I simply want to make my
overflow-y: scrollable
(when originally it is not scrollable). I don't want to extend the size of the
, but would rather make the entire thing scrollable. Is this possible?


In order to have an 'overflow: scroll', you must first make sure the height or max-height of your div should be fixed. Rest of your code is fine.