Question

在html5（phonegap）中开发一个Android应用程序，我不得不使用scrollView。我可以在Java中找到html5中的任何内容，所以我正在尝试使用库iScroll来实现滚动的目的但是当我向下滚动它反弹回顶部时，我想它被称为橡皮筋 - 影响。我该如何处理这个故障？另外，当我向下滚动时，我会在Logcat中收到警告：

 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>

Answer 1

试试这个：

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

如果不起作用，请执行以下操作： https://groups.google.com/forum/#!topic/iscroll/CMB9d_e5d4Y

Answer 2

我解决了这个问题，从包装器中删除了height:100%;属性。

bottom:0;确保包装器一直延伸到屏幕底部。

Answer 3

如果您的container有wrapper div，则会出现此问题。此问题的解决方法是将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;
}

希望有所帮助！

Answer 4

有同样的问题，经过甜蜜的午夜调试，我的包装器由于某种原因调整尺寸，使其高度超过手机屏幕。我使用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>

<强> JS

// 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);
    }
});

可滚动列表反弹回顶部[iScroll]，橡皮筋效应？

4 个答案: