0

在 html5(phonegap) 中开发一个 android 应用程序，我不得不使用一个滚动视图。可以在 html5 中找到任何东西，就像我们在 Java 中一样，所以我正在尝试使用用于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>
4

4 回答 4

1

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

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

于 2012-11-17T21:54:57.910 回答
1

尝试这个：

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

如果不起作用，请浏览： https ://groups.google.com/forum/#!topic/iscroll/CMB9d_e5d4Y

于 2012-08-31T06:10:28.717 回答
0

有同样的问题，经过甜蜜的午夜调试后发现我的包装器由于某种原因正在调整大小，使其高度比手机屏幕大得多。我使用 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);
    }
});
于 2013-09-10T18:26:50.003 回答
0

当您有一个containerdiv时会出现此问题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-06T19:13:50.363 回答