可滚动列表反弹回顶部[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]，橡皮筋效果？

回答

相关问题