Geek asks and answers

Javascript document.ready doesn't always work, iscroll!

Hello, we are creating a mobile web.app using iScroll to scroll. The problem is that the iScroll scroller sometimes encounters problems loading the page first.

This is the code we added (document).readyto solve the problem, and it does it mostly, but it doesn't work from time to time.

We assume that the scroller does not work when the height of the wrapper (scrollable area) loads to slow, so we added document.readywith the results above. /qaru.site / ...

<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 will be grateful for your help!

thank

+3
source share
5 answers

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

$(document).ready.addEventListener

, .

.

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

ready - , , ... . :

$(document).ready(function(){
    //do stuff here
});
+1
<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>

, , iScroll

+1

, jQuery, iScroll . JavaScript, , <head> , :

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

$(function(){

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

</script>

, , DOM , touchmove, iScroll div.

div . div , , , .

0
source

Old thread, but I thought I could throw my 2 cents since I am working on it, and since .bind () is deprecated in favor of .on () and other funny things:

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

Of course, the “#wrapper” binding means that I still have to deal with touchmove events in the header and footer that are not controlled by the iScroll object, but if that happens, I will capture the event on the “body” since then all three divs should “bubble” into the body object.

0
source

More articles:


All Articles