knockout div scrolling in foreach - html

Question

I'm new in knockout. I want to do like if foreach contains more than 5 array then in div vertical scrolling should be apply , otherwise scrolling should be remove.
how to do this using knockout ?
HTML :
<div class="temp-autocomplete-suggestions">
<!-- ko foreach: autocompleteData -->
<div class="temp-pro-autocomplete-suggestion" data-index="text: $index">
<div class="temp-pro-suggest-pro-img">
<img class="temp-pro-img-responsive" data-bind="attr: {src:imageUrl}" alt="">
</div>
<div class="temp-pro-suggest-pro-data">
<div class="product-line product-name">
<a data-bind="attr: {href:productUrl}" target="_blank"><span data-bind="text:productName1"></span></a>
</div>
<div class="product-line product-price">Price: <span data-bind="value:productPrice"></span></div>
<div class="product-des">
<p class="short-des" data-bind="attr : {id:productName1}">ProductName1: <span data-bind="text:productName1"></span></p>
</div>
</div>
<div class="temp-pro-additem">
<button id="temp-pro-search-item-list" class="temp-pro-materialize-btn">Click Here</button>
</div>
</div>
<!-- /ko -->
</div>
Note : autocompleteData is ko.observableArray([])

Answer 1

Use the style binding in the div just outside the foreach binding, and check the length of autocompleteData.
<div class="temp-autocomplete-suggestions"
data-bind="style: { overflowY: autocompleteData().length > 5 ? 'scroll' : 'auto',
height: autocompleteData().length > 5 ? '300px': 'initial' }">
<!-- ko foreach: autocompleteData -->
<div class="temp-pro-autocomplete-suggestion" data-index="text: $index">
<div class="temp-pro-suggest-pro-img">
<img class="temp-pro-img-responsive" data-bind="attr: {src:imageUrl}" alt="">
</div>
<div class="temp-pro-suggest-pro-data">
<div class="product-line product-name">
<a data-bind="attr: {href:productUrl}" target="_blank"><span data-bind="text:productName1"></span></a>
</div>
<div class="product-line product-price">Price: <span data-bind="value:productPrice"></span></div>
<div class="product-des">
<p class="short-des" data-bind="attr : {id:productName1}">ProductName1: <span data-bind="text:productName1"></span></p>
</div>
</div>
<div class="temp-pro-additem">
<button id="temp-pro-search-item-list" class="temp-pro-materialize-btn">Click Here</button>
</div>
</div>
<!-- /ko -->
</div>
Example (see in full page view):
var viewModel = function(){
var self = this;
self.autocompleteData = ko.observableArray();
self.addData = function(){
self.autocompleteData.push({});
};
};
ko.applyBindings(new viewModel());
.hello {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="temp-autocomplete-suggestions"
data-bind="style: { overflowY: autocompleteData().length > 5 ? 'scroll' : 'auto', height: autocompleteData().length > 5 ? '300px': 'initial' }">
<!-- ko foreach: autocompleteData -->
<div class="hello">Hello</div>
<!-- /ko -->
</div>
<button data-bind="click: addData">Add to Array</button>