jQuery 移动列表视图溢出不起作用

Question

我有这个 HTML 页面。（我用的是jQuery手机1.3.1）

应该是聊天之类的-window。我遇到的问题是，当您查看 <li> 元素时，这个 <ul data-role="listview"> 元素应该是可滚动的。但是，出于某种原因，它根本无法滚动，因为内容似乎隐藏在页脚后面 <div>，但事实并非如此。

我有以下 HTML 标记：

（没有标签内的换行符，这样你们可以更好地阅读这篇文章）

 <div data-role="page" id="chat">
         <div data-role="header" data-position="fixed">
            <a href="#clickAndChat" data-role="button" data-inline="true" 
            data-transition="slide" data-direction="reverse" 
            data-icon="arrow-l" class="ui-icon-alt" data-theme="c">Back</a>
            <h1 id="headerPage1">Andi (Fake)    (50m)</h1>
        </div>
        <div class="ui-content" data-role="main" >                
            <ul data-role="listview" id="chatContent" style="overflow-y: scroll">
                <li>Satz A von Andi</li>
                <li>Satz B von mir</li>
                <li>Satz C von Andi</li>
                <li>Satz A von Andi</li>
                <li>Satz B von mir</li>
                <li>Satz C von Andi</li>
                <li>Satz A von Andi</li>
                <li>Satz B von mir</li>
                <li>Satz C von Andi</li>
                <li>Satz A von Andi</li>
                <li>Satz B von mir</li>
                <li>Satz C von Andi</li>
                <li>Satz A von Andi</li>
                <li>Satz B von mir</li>
                <li>Satz C von Andi</li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <input type="text" name="chatText" id="chatText" placeholder="Type here...">
            <button id="sendChatText" data-icon="check" class="ui-icon-alt"
             data-theme="c">Send</button>               
        </div>
    </div>

Answer 1

ul 实际上是可滚动的。您看不到滚动条的原因是元素没有超过最大高度。当你限制了ul高度，元素再也不能包含时，就会出现滚动条。

看看这个fiddle。

jQuery 移动列表视图溢出不起作用

jQuery mobile Listview overflow not working

html

javascript

jquery

jquery-mobile