Прокручиваемый список отскакивает к началу [iScroll], эффект резиновой ленты?

Разработка приложения для Android в html5(phonegap), и мне пришлось использовать scrollView. Можно найти что-нибудь в 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 ответа

Я решил эту проблему, удалив height:100%; собственность из моей обертки.

bottom:0; убедился, что оболочка растянута до самого конца экрана.

Источник

Попробуй это:

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

Если не работает, пройдите по ссылке: https://groups.google.com/forum/.

Источник

Эта проблема возникает, когда у вас есть container 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;
}

Надеюсь, это поможет!

Источник

У меня была та же проблема, и после сладкой полуночной отладки я узнал, что размер моей обертки по какой-то причине изменился, и теперь он намного больше экрана телефона. Я использую мобильный пейджинг 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);
    }
});
Источник
Другие вопросы по тегам