javascript document.ready not always working, iscroll !

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

$(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);
});

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
});

<script type="text/javascript">
    var myScroll;
    setTimeout(function() {
        myScroll = new iScroll('wrapper');
    }, 200);
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

Is the solution we came up with for all people using iScroll and in the same situation

Assuming you are using jQuery, what you need to do is initiating iScroll after the document is loaded. Prefer not using inline JavaScript, but if you really, really have to, in the < head > tag, write:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(function(){

$(document).bind('touchmove', function(e){
    e.preventDefault();
});
new iScroll('wrapper');
});

</script>

Thus nothing will happen until the DOM is loaded, you will cancel out all other touchmove events, then add iScroll functionality to your div "wrapper".

The wrapper div needs a set height and width. The first div inside wrapper does not, but if it doesn't have a set height, it needs to float, so the browser can calculate it's height dynamically.

An old thread, but I thought I might throw in my 2 cents since the I'm working on this now, and since .bind() has been deprecated in favor of .on(), and other fun stuff:

var myScroll;
var myScrollObjectID = "wrapper";
$(document).ready(function() {

    setTimeout(function() {
        myScroll = new iScroll(myScrollObjectID);
        console.log("iScroll object set: ", myScroll, myScrollObjectID);
    }, 200);

    $("#" + myScrollObjectID).on("touchmove", function(e){
          e.preventDefault();
          var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
          console.log('document->touchmove', e, touch);

    });  
    console.log("jQuery->document->ready");
});

Sure, binding "#wrapper" means I may still have to deal with touchmove events in the header and footer not controlled by the iScroll object, but if that's the case, then I'll capture the event on "body" since all three divs 'should' bubble-up into the body object.