Question

您好我们正在使用iScroll构建移动web.app进行滚动。问题是，当页面首次加载时，iScroll滚动条有时会出现问题。

这是代码，我们添加(document).ready来解决问题，并且它主要是这样做的，但偶尔它似乎无法正常工作。

我们的猜测是，当包装器的高度（可滚动区域）加载速度变慢时，滚动器不起作用，这就是为什么我们将document.ready与上述结果相加的原因。 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>`

我们非常感谢您的帮助！

谢谢

Answer 1

$(document).ready();不应该在第一次通话后按照你的方式调用。

$(document).ready.addEventListener

看起来第三次调用就是试图覆盖它。

尝试执行以下操作。

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

Answer 2

ready是一种方法，它将一个函数作为参数，并在文档准备就绪时执行它。所以你应该：

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

Answer 3

<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并且处于相同情况的人提出了解决方案

Answer 4

假设您正在使用jQuery，您需要做的是在加载文档后启动iScroll。不喜欢使用内联JavaScript，但如果你真的，真的必须在＆lt;头＆gt;标签，写：

<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内部包装器没有，但如果它没有设置高度，它需要浮动，所以浏览器可以动态计算它的高度。

Answer 5

一个旧线程，但我想我可能会投入2美分，因为我现在正在处理这个问题，因为.bind（）已经被弃用而不赞成.on（）和其他有趣的东西：< / p>

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

当然，绑定“#wrapper”意味着我可能仍然需要处理不受iScroll对象控制的页眉和页脚中的touchmove事件，但如果是这种情况，那么我将在“body”上捕获事件所有三个div'应该'冒泡进入身体对象。

javascript document.ready并不总是正常工作，iscroll！

5 个答案: