domoindal domoindal - 1 month ago 11
Javascript Question

Div height in overflow content

I have been having a look at several post here with issues similar than this one, but none of them solve my problem.

Here I post the HTML:

<div id="scroller" class="general_scrollingContainer" layout="column" layout-fill layout-align="top left">
<ul class="dynamic-grid" angular-grid="pics"
ag-grid-width="200"
ag-gutter-size="10"
ag-id="gallery"
refresh-on-img-load="true">
<li class="grid" ng-repeat="product in products">
<a ng-href="{{product.link_shop}}" target="_blank">
<img class="grid-img" ng-src="{{product.url_imagen}}" />
</a>
<div class="img-desc-wrap" layout="column" layout-fill layout-align="top left">
<a class="title" ng-href="{{product.link_shop}}" target="_blank" style="font-size:12px;line-height:16px">
{{product.title}}
</a>
<div class="date"><b>Category</b>: {{product.category_name}}</div>
<div class="object_icons_holder" layout="row" layout-align="space-between stretch">
<div flex layout-align="start center" layout="row">
<ng-md-icon icon="share" size="30" style="fill:#666;margin:-5px 0 0 10px" class="social_icon" aria-label="Share Product"
ng-click="showSocialShare($event, 0)">
<md-tooltip md-direction="top">
Share in Social Networks
</md-tooltip>
</ng-md-icon>

</div>
<div class="shop_price">{{product.price}}</div>
</div>
</div>
</li>
</ul>
</div>


The CSS for the class general_scrollingContainer:

.general_scrollingContainer {
overflow-y: scroll;
padding: 0 10px;
width: 100%;
}


and a Javascript with an event that resize the visible height of the div to adjust it:

$(window).resize(function() {
var $main_container = $(window).height();
$(".general_scrollingContainer").css({
"height": ($main_container - 160) + 'px'
});
});


The main div 'general_scrollingContainer' has a fixed height depending on the window height and inside are the elements which overflow the visible area.

The question is that I'm trying to get the event when scrolled to the bottom and need the real height of the div including the height not visible.

Using
$('div.general_scrollingContainer').innerHeight()
, displays only the height of the visible area of the DIV, the same value than
$('div.general_scrollingContainer').height()
, so I do not know how to get the whole height.

Any help?

Answer

For the height of your content, get the height of the ul-element inside the div. If you have multiple elements, you could wrap it in another inner-content div and get the height of that.