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的位置是绝对的或固定的，并且定义了top和bottom。

将iScroll与Jquery Mobile一起使用。

2 个答案: