1

标题说明了一切。在我的应用程序开始时，我从 php 文件（一些 div）中检索数据并将它们附加到 wrapper-div。在这个 wrapper-div（不称为 wrapper）周围是 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');
}

我已经玩过setTimeoutiscroll.com 上解释的 arround，但它没有任何改变......希望你知道出了什么问题。

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

4

4 回答 4

2

我遇到过同样的问题。

它来自外部“包装器”在 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>
于 2012-06-07T17:57:09.383 回答
0

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

var myScroll;

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

我称之为“onDeviceReady”：

function onDeviceReady()
{        
    loaded();
}
于 2012-05-23T06:08:52.187 回答
0

http://jsfiddle.net/Eccgy/

检查这可能对你有帮助

于 2012-08-22T06:48:31.247 回答
0

这是一个简单的 iscroller 会有所帮助。它很容易实现

include scripts 和 jsut 将属性 data-iscroll 添加到 div 中，您需要该效果。

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

于 2013-05-24T09:25:51.773 回答