3

我正在创建一个移动应用程序，并且正在尝试这样做：我想要打开一个弹出窗口，它将作为自动建议功能使用。用户输入一个搜索词，在输入下方的一个 div 中有与用户搜索相对应的项目。

现在，当弹出窗口打开时，我不希望用户能够滚动主应用程序，我只希望他能够在 div 内滚动搜索结果。

<div id="popUpWrapper">
                <div id="popUp">

                    <div class="row">
                        <input type="text" class="textInput" placeholder="Search" />
                    </div>
                    <div class="row">
                        <div id="results" data-title="Results">
                            <div class="frame">
                                <div class="row postItem">
                                    Example search result
                                </div>
                                <div class="row postItem">
                                    Example search result.
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>

#popUpWrapper是具有 100% 宽度和高度的叠加调光器。使用 jQuery，我通过将touchmove事件绑定到return false. 但是，这也禁用了#resultsdiv 中的滚动。将事件与该选择器解除绑定并没有帮助。如果我不绑定事件，我可以在#results 中滚动，但主应用程序也会滚动。

有没有我遗漏的简单修复方法，或者我应该让它滚动？

4

1 回答 1

0

该问题的评论已经指出，这种实现有一些弱点。

因此，我建议创建页眉和页脚并定位两者，position: fixed而主要搜索内容基本上保持不变（除了某种顶部和底部填充为页眉和页脚腾出空间）。

于 2013-06-18T23:23:01.223 回答