Использование iScroll с Jquery Mobile.

Question

У меня есть простое диалоговое окно, созданное с помощью html5 и Jquery Mobile. Это выглядит следующим образом:

<div data-role="dialog" id="page2" data-theme="a">

            <div data-role="header" class="header">

                <h1>Door Styles</h1>

            </div><!-- /header -->

            <div data-role="content" data-theme="a">


            <div id="wrapper">

                <div id="scroller" class="scroll">  

                    <ul data-role="listview" id="mylist">

                    </ul>

                    </div>

                </div>

            </div><!-- /content -->

            <div data-role="footer" class="footermodal">

                <h1>↕ Please Scroll ↕</h1>

            </div><!-- /footer -->

        </div>

Причина, по которой я реализовал iScroll, заключалась в том, что в Android 2.2.2 диалоговое окно не было прокручиваемым. Однако, когда я реализую его, мой заголовок и нижний колонтитул практически исчезают. И когда вы прокручиваете, как только вы отпускаете его, он отскакивает к вершине. Я реализую это с помощью этого кода:

    <script type="text/javascript">

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper');
}

    window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false); 

            </script>

Кажется, это конфликт между стилем Jquery и стилем iScroll. У кого-нибудь еще возникла такая проблема? Или знаете как это исправить?

Answer 1

Вам нужно установить элемент после его создания.

newElement =  function () {$ ("body"). append ('<div id='wrapper'> content </ div> ");loaded(); }

Answer 2

#wrapper { position: absolute; top: 0px; bottom: 0px; }

Я только что столкнулся с этой проблемой и исправил ее, убедившись, что положение вашего div-оболочки является абсолютным или фиксированным, а верх и низ определены.