Question

标题说明了一切。在我的应用程序开始时，我从php文件（一些div）检索数据并将它们附加到包装器div。围绕这个包装器div（不称为包装器）是iScroll包装器。

iScroll正在运行，但有橡皮带效应。

这是（索引）HTML：

<div data-role="header" data-theme="c" data-position="fixed">
          <h1>Title</h1>
      </div><!-- /header -->

      <div id="wrapper">
          <div id="scroller">

      <div data-role="content" id="content">

         <div id="headlinesindex">


          <div class="span3" id="9999999999"></div>

        </div>
        </div>
       </div>

      </div>

      <script>
          $(document).ready(function() {
                            onBodyLoad();
                            });
          </script>

这是javascript文件：

    function onBodyLoad()
{
    $.ajax({
    url: "headlines_getter.php?last="+ $(".span3:last").attr('id') ,
    success: function(html) {
           if(html){    
            $("#headlinesindex").append(html);

           setTimeout(function () {
                      myScroll.refresh();
                      }, 0);

        }
    }
    });
}

function onDeviceReady()
{        
    var myScroll = new iScroll('wrapper');
}

我在iscroll.com上对setTimeout进行了解释，但它没有任何变化......希望你知道出了什么问题。

提前致谢。最好的问候，约翰。

Answer 1

我遇到了同样的问题。

它来自iscroll中未正确调整大小的外部“包装器”。

如果它的大小与内部“卷轴”高度大小相同，那么iscroll将没有去哪里和橡皮筋。

我为我修复了它，并为其他人创建了一个具有相同问题的分支：

https://github.com/meckdahl/iscroll

==================================高级用法

以下是我用来在我们的Spine.JS移动应用程序中维护20多个滚动容器的一些插件函数：

对于每个页面，我设置了一个特定的包装器，如：

<div id="wrapper2">

然后，只有在加载该页面时才动态创建iScroll：

加载页面内容后，我这样称呼：

window.resetScroll(2)
window.setScrolling(true)

这将重新初始化此页面的iScroll。

以下是我在根页面上定义的函数：

<script type="text/javascript">

   // maximum wrapper index = 23 currently (9/12/12)
    var myScrolls = [];
    myScrolls.length = 29; // Scrolls to look for wrapper1-30

    var refreshScrolling = function() {
        //console.log('refreshScrolling Active Scroll Items: ');
        myScrolls.forEach( function(scrollItem){
            scrollItem.refresh();
        });
    };

   var refreshScroll = function(wrapperNumber) {
       //console.log('refreshScroll wrapperNumber: wrapper' + wrapperNumber.toString());

       var i = wrapperNumber;
       setTimeout(function () {
        (myScrolls[i-1]).refresh();
       }, 100);
   };

   // This looks for and initializes and dynamic scrolls that Spine recently put in memory
   // and have not been initialized yet.
    var setScrolling = function() {

       for (var i=1; i < myScrolls.length+1; i++){

           if (($("#wrapper"+(i).toString()).length !== 0)  ){

               if((myScrolls[i-1] !== null) && (myScrolls[i-1] !== undefined)){
                   // Already setup
               }
               else{
                   myScrolls[i-1] = new iScroll('wrapper'+ (i).toString(),
                           { hScroll: false, hScrollbar: false, vScrollbar: false });
 created.");
               }
           }
       }
    }

    // This must be called on a view with dynamic content to re-create the view to fit the potentially
    // changing content size.  It will only rebuild the one scroll whose index is passed in.
    // The index should be the wrapper# for the view attached to the controller.
    // Call setScrolling after this to catch any uninitialized views.
    var resetScroll = function(wrapperNumber) {


       var i = wrapperNumber;
       //   if (!(i in myScrolls)) continue; // skip nonexistent elements && !(myScrolls[i-1] )
       if (($("#wrapper"+(i).toString()).length !== 0)  ){

           if( (myScrolls[i-1] !== null) && (myScrolls[i-1] !== undefined)){
               // Destroy Skipped right now
               myScrolls[i-1].destroy();
               myScrolls[i-1] = null;
           }

           myScrolls[i-1] = new iScroll('wrapper'+ (i).toString(),
                   { hScroll: false, hScrollbar: false, vScrollbar: false });
           created.");
       }
    }

    function loaded() {
        setTimeout(function () {
            setScrolling();
        }, 100);
    }
    window.addEventListener('load', loaded, false);

</script>

Answer 2

我的自定义脚本遇到了同样的问题，所以我更改了代码，现在它运行良好：

var myScroll;

function loaded() {
    setTimeout(function(){
        myScroll = new iScroll('wrapper');
        myScroll.refresh();       
    } , 100 );
}

我在“onDeviceReady”上调用它：

function onDeviceReady()
{        
    loaded();
}

Answer 3

http://jsfiddle.net/Eccgy/

检查这可能会对您有所帮助

Answer 4

这是一个简单的iscroller，可以提供帮助。它很容易实现

包含脚本和jsut将一个属性data-iscroll添加到div，你需要这个效果。

https://github.com/watusi/jquery-mobile-iscrollview

带有iScroll和jQuery mobile的Rubberband

4 个答案: