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事件绑定到return false来禁用滚动。但是，这也禁用了#results div中的滚动。从该选择器取消绑定事件没有帮助。如果我没有绑定事件，我可以在#results中滚动，但主应用程序也会滚动。

我是否有一个简单的修复方法，或者我只是让它滚动？

Answer 1

问题的评论已经指出，这种实施方式存在一些缺点。

因此，我建议使用position: fixed创建页眉和页脚，同时主搜索内容基本保持不变（除了某种顶部和底部填充以便为标题和页脚。）

jQuery - 禁用滚动正文，启用滚动div

1 个答案: