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>
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.