Question

我有一个弹出窗口，我想防止它在打开时在后台滚动。使用CSS在桌面上执行此操作很容易：

body { overflow: hidden; }

但是，IOS不遵守此规则，并且在用户实际滚动弹出窗口时仍允许滚动背景。

禁用触摸包含页面上所有内容的包装元素的按钮，弹出窗口无效：

document.querySelector('.wrapper').addEventListener('touchstart touchmove touchend', function (e) {
    e.preventDefault();
});

但是在任何地方禁用触摸都可以：

$('*').bind('touchstart touchmove touchend', false);

我如何才能在除popover元素之外的所有位置都禁用它？

更新

Popover CSS：

.popover {
    background: rgba(255,255,255,.5);
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

Answer 1

另一种方法是将弹出窗口创建为单个整页div，以“阻止”事件到达正文。将弹出框放置在该div的前面。

您可以直接使用JS或do { let res = try JSONDecoder().decode([String:Dog].self,from:data) } catch { print(error) }来阻止事件，并使用element {point-events:none}来“撤消”该事件

如何防止使用JavaScript触摸除一个元素以外的所有元素？

更新

1 个答案: