jQuery - 禁用页面滚动，启用元素滚动

Question

jQuery - 禁用页面滚动，启用元素滚动

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来禁用其上的滚动。然而，这也禁用了#results div中的滚动。从该选择器中解除事件无济于事。如果我不绑定该事件，我可以在#results中滚动，但主应用程序也会滚动。

有没有什么简单的修复方法，还是我应该让它可以滚动？

- Gregor Menih

“我只想让他能够在搜索结果的div中滚动。” 通过这样做，您立即排斥了几乎所有iPad / iPhone用户。他们无法准确地在div内滚动，因为滚动条甚至不会显示出来。这是一个错误。 - Travis J

哦，我不知道 - 他们不能通过上下滑动div来滚动吗？他们必须使用滚动条吗？ - Gregor Menih

滚动条甚至不存在。更糟糕的是，这些设备的操作系统在确定您是在 div 中滚动还是在页面中滚动方面存在问题。作为 iPad 或 iPhone 用户，被迫滚动页面的子部分是一场噩梦。 - Travis J

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hauke P. · Answer 1

问题的评论已经指出这种实现方式有一些弱点。因此，我建议创建一个页眉和页脚，并将两者的位置都设置为position: fixed，而主要的搜索内容基本上不会改变（除了一些顶部和底部填充以为页眉和页脚腾出空间）。