仅滚动列表视图，而不滚动其他 div？

Posted 2023-05-09

【中文标题】仅滚动列表视图，而不滚动其他 div？

【英文标题】：Scroll only listview, not other div?

【发布时间】：2015-10-26 06:27:54

【问题描述】：

如果用户在 listview 上滚动，如何设置，listview 之外的其他 div 也不需要滚动？我找不到任何参考来做这件事。

【参考方案1】：

将您的列表放入 DIV 容器中。给容器一个最大高度并使其可滚动：

<div class="listCont">
    <ul data-role="listview" data-inset="true">
        <li>item</li>
        <li>item</li>
        ...
    </ul>
</div>

.listCont 
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 250px;

DEMO

-webkit-overflow-scrolling: touch; 是让它在 webkit 触控设备上可滚动的技巧。

【讨论】：

我是否需要定义 max-height 才能使其工作？如果我将其设置为自动，它似乎无法正常工作..

@Rendy，如果你想要一个可滚动的容器，你必须设置高度或最大高度。我设置了最大高度，所以如果列表很短，它会缩小。如果您不希望它改变，您可以设置高度。如果您不设置高度，则容器只会匹配列表的高度，并且会破坏使其滚动的全部意义。