user1871869 user1871869 - 7 days ago 7
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) {
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>





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

Answer

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.