jQuery - 禁用滚动 body，启用滚动 div

Question

我正在创建一个移动应用程序，并且我正在尝试执行此操作:我想要打开一个弹出窗口，它将作为自动建议功能。用户输入搜索词，输入下方的 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 事件绑定(bind)到 return false 来禁用滚动。但是，这也禁用了 #results div 中的滚动。从该选择器解除事件绑定(bind)没有帮助。如果我不绑定(bind)事件，我可以在 #results 中滚动，但主应用程序也会滚动。

是否有我遗漏的简单修复，或者我应该让它滚动？

Answer 1

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

因此，我建议创建一个页眉和页脚，并使用 position:fixed 定位它们，而主要搜索内容基本上保持不变(除了某种顶部和底部填充以使得页眉和页脚的空间)。