javascriptcssiscroll

iScroll getting height of parent Div


I am using iScroll in a project and got a starnge behaviour where iScroll is getting the height from the parent div and I would like it to use the height of the div I pass into it.

I managed to reproduce this in a jsFiddle: http://jsfiddle.net/wjtbxpmc/

The code is basically:

function findClosest(el, selector) { // this is just to find closest parent by class
    var isClass = selector.indexOf('.') == 0;
    if (isClass) while ((el = el.parentElement) && !el.classList.contains(selector.slice(1)));
    else while ((el = el.parentElement) && el.tagName.toLowerCase() != selector);
    return el;
}

var table = document.querySelector('table');
for (var i = 0; i < 50; i++) {
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    td.innerHTML = 'Line ' + i;
    tr.appendChild(td);
    table.appendChild(tr);

}

var scrollDiv = findClosest(table, '.scrollable');
new IScroll(scrollDiv, {
    mouseWheel: true,
    scrollbars: true,
    click: true
});
#wrapper {
    height: 80vmin;
}
.scrollable {
    height: 63vmin;
    margin-bottom: 3vmin;
    overflow: hidden;
}
div {
    padding: 2vmin;
    border: 1px solid #ccf;
}
<script src="http://lab.cubiq.org/iscroll5/build/iscroll.js"></script>
    <div id="wrapper">
        <div class="scrollable">
            <table></table>
        </div>
        <div>Srcoll bar should be above this div...</div>
    </div>

Solution

  • Ok, seems like adding position: relative; to my .scrollable fixed the issue.

    If this is not the way to do it more answers are welcome.