I'm running iScroll 4 inside a DIV, but the DIV's height is generated dynamically, and screws up iScroll
<script src="js/iscroll/iscroll.js?v4"></script>
<script>
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper-sidebar-left');
myScroll = new iScroll('wrapper-sidebar-right');
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
If I give iScrolls containing DIV a hard coded height then it works fine.
But it's a dynamic height created by javascript. And iScroll ignores it. But when you adjust the viewport size on a desktop browser, its kicks in and works.
This is the script creating the dynamic height.
<script>
$(document).ready(function() {
$("#latest-tweet").tweet({
count: 1,
username: ["motocomdigital"],
loading_text: "searching twitter..."
}).bind("loaded", function(){
var tweetheight = $("#tweet-area").height();
$("#sidebar-wrapper").css({ bottom: tweetheight });
});
});
</script>
Ignore the twitter script - it's after the binded function which is determining the height of the containing DIV.
The height on the 'scroller's' containing DIV is determined by these CSS values: top: 0px and the 'bottom' value. But the bottom CSS value is dynamic.
See live project here - this is when it's broken, click menu to see the broken scrollers in the sidebar.
Broken scrollers
Then see the same project below but with a hard coded bottom CSS value added in the head, and the script removed. And this works fine.
Working scrollers
Which means iScroll is ignoring the bottom CSS value (but it starts working when you adjust the viewport size, but no good on a device)
Any help would be so appreciated
Thanks, Josh
UPDATE, THIS WORKS - BUT WILL IT WORK EVERYTIME?
<script>
var myScroll;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('wrapper-sidebar-left', {
scrollbarClass: 'sub-scrollbar',
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
myScroll = new iScroll('wrapper-sidebar-right');
}, 1000);
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>