3

您好，我们正在构建一个使用 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>`

我们将不胜感激！

谢谢

4

5 回答 5

1

$(document).ready();不应以第一次调用后的方式调用它。

$(document).ready.addEventListener

此外，看起来第三次调用它正试图覆盖它。

尝试执行以下操作。

var myScroll;
$(document).ready(function {
    myScroll = new iScroll('wrapper');
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
});
于 2011-03-22T17:03:29.493 回答
1

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

$(document).ready(function(){
    //do stuff here
});
于 2011-03-22T18:48:19.147 回答
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 并在相同情况下的人提出的解决方案吗

于 2011-03-23T12:11:12.077 回答
0

假设您使用的是 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 需要设置高度和宽度。wrapper 中的第一个 div 没有，但如果它没有设置高度，它需要浮动，因此浏览器可以动态计算它的高度。

于 2012-05-03T11:55:28.960 回答
0

一个旧线程，但我想我可能会投入 2 美分，因为我现在正在处理这个问题，并且由于 .bind() 已被弃用，取而代之的是 .on() 和其他有趣的东西：

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 “应该”冒泡到身体对象中。

于 2013-04-03T15:21:23.860 回答