javascript document.ready not always working, iscroll !

Question

Hello we are building a mobile web.app using iScroll for scrolling. The problem is that the iScroll scroller sometimes has problems working when the page loads at first.

This is the code, we added (document).ready to solve the problem, and it is doing it so mostly, but once in a while it doesn't seem to work.

Our guess is that the scroller isn't working when the height of the wrapper (scrollable area) loads to slow, that's why we added the document.ready with the results stated as above. https://stackoverflow.com/

<script type="text/javascript">

var myScroll;
$(document).ready(function loaded() {
    myScroll = new iScroll('wrapper');
});

$(document).ready.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

$(document).ready.addEventListener('DOMContentLoaded', loaded, false);

</script>`

We'd appreciate some help !

Thank you

Answer 1

$(document).ready(); should not be called the way you have it after the first call.

$(document).ready.addEventListener

Also it looks like the third call to it is trying to overwrite it.

Try doing the following.

var myScroll;
$(document).ready(function {
    myScroll = new iScroll('wrapper');
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
});

Answer 2

ready is a method that takes a function as parameter and executes it when the document is ..well ready. so you should :

$(document).ready(function(){
    //do stuff here
});