可滾動列表反彈回頂部[iScroll]，橡皮筋效果？

在html5（phonegap）中開發一個android應用程序，我不得不使用scrollView。可以在html5中找到任何東西，就像我們在Java中一樣，所以我試圖使用圖書館iScroll，它用於滾動目的，但當我向下滾動時，它會彈回到頂部，我想它被稱爲橡皮筋效應。我該如何處理這個故障？另外，我通過拖動滾動下來，我得到一個警告在logcat中：可滾動列表反彈回頂部[iScroll]，橡皮筋效果？

W/webview(2795): Miss a drag as we are waiting for WebCore's response for touch down.

檢查我下面的代碼，其中，列表項獲得動態添加這應該不是問題，問題在於IMO在HTML本身。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Storage Example </title> 
    <link rel="stylesheet" type="text/css" href="indexCss.css" /> 
    <style type="text/css" media="all"> 
    body,ul,li { 
     padding:0; 
     margin:0; 
     border:0; 
    } 
    </style> 

    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> 
    <script src="index.js" type="text/javascript" charset="utf-8" > 
    </script> 

    </head> 
    <body> 

    <header> 
<input type="text" id="name" placeholder="enter name" /> 
<input type="button" value="Add" onclick='Add();' /> 
</header> 

<div id="wrapper"> 
    <div id="scroll-content"> 

<div id="result"></div> 
    </div> 
</div> 

<footer> 
    Some Footer Content 
</footer> 

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

    <script type="text/javascript"> 

var theScroll; 
function scroll() { 
    theScroll = new iScroll('wrapper'); 
} 
document.addEventListener('DOMContentLoaded', scroll, true); 



</script> 

    </body> 
</html>

來源

2012-08-31 Ayush Goyal

試試這個：

scroll = new iScroll(this, { 
    useTransform: false, 
    useTransition: true 
});

如果還不行，經過這樣的： https://groups.google.com/forum/#!topic/iscroll/CMB9d_e5d4Y

來源

2012-08-31 06:10:28 closure

這是一樣的，我從精簡版切換到這個版本。 –

您能否請您從瀏覽器發佈html（保存頁面爲）。 – closure

與我在我的問題中發佈的代碼相同，我現在對html5失去信心，並將切換回原生。 –

我有這個問題解決了，從我的包裝取出height:100%;財產。

bottom:0;確保包裝一直延伸到屏幕底部。

來源

2012-11-17 21:54:57

當您的 div用於您的wrapper時，會出現此問題此問題的解決方法是將container的高度設置爲99%。

以下是其最終修復了這個問題對我來說是CSS：

#productsScreen{ /* my container */ 
    height: 99%; 
    z-index: 1; 
    top: 0px; 
    left: 0; 
    overflow: auto; 
} 
#productListWrapper{ 
    background:transparent; 
    position:absolute; 
    z-index:1; 
    top: 88px; 
    bottom:49px; 
    left:0; 
    width:100%; 
    overflow:auto; 
} 
#productsListScroller { 
    position:absolute; z-index:1; 
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
    width:100%; 
    padding:0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
}

希望幫助！

來源

2013-08-06 19:13:50

有同樣的問題，並在甜蜜的午夜調試後，我的包裝由於某種原因調整大小的方式比手機屏幕更大。即時通訊使用jQuery的移動分頁，不知何故它與iScroll混亂。這是我如何解決它：

HTML

<div id="screen" data-role="page"> 
    <div data-role="content"> 
     <div id="list-wrapper"> 
      <ul> 
      ... 
      </ul> 
     </div> 
    </div> 

    <div data-role="footer"> 
    ... 
    </div> 
</div>

// the iScroll should be initialized after the page is visible 
// to prevent bug with display:none. If you are not using 
// jQuery mobile paging this can be skipped. 
$('#screen').on('pageshow', function() { 

    // calculate the expected height of the real content wrapper and set it   
    var screenHeight = $('#screen').height(); 
    var footerHeight = $('#screen [data-role="footer"]').height(); 
    var realContentHeight = screenHeight - footerHeight; 
    $('#list-wrapper').css({'height': realContentHeight + 'px'}); 

    // create or refresh the iScroll after resizing the wrapper   
    if (myScrollFunction != null) { 
     setTimeout(function() { 
      myScrollFunction .refresh(); 
     }, 100); 
    } else { 
     setTimeout(function() { 
      myScrollFunction = new iScroll('list-wrapper'); 
     }, 100); 
    } 
});

來源

2013-09-10 18:26:50 Plamen

可滾動列表反彈回頂部[iScroll]，橡皮筋效果？

回答

相關問題