iOS 键盘使页面可滚动 - Angular PWA答案

【问题标题】：iOS keyboard makes page scrollable - Angular PWAiOS 键盘使页面可滚动 - Angular PWA
【发布时间】：2020-07-07 20:37:45
【问题描述】：

您好，我有一个带有搜索输入的页面。当我专注于输入时，虚拟键盘会出现并使页面内容可滚动。我从 stackoverflow 上的其他问题中尝试了许多可能的解决方案，但这些对我不起作用。

我尝试过的是，当页面可滚动并且用户滚动时，我使用 scrollTo(0,0) 函数来滚动回顶部。这种方法使应用程序开始“闪烁”当用户拖动以滚动时。

还有其他方法可以做到这一点吗？

主机监听器：

@HostListener('window:scroll', ['$event']) onScrollEvent($event) {
    window.scrollTo(0, 0);
}

HTML 和 BODY 样式：

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}
body {
  position: fixed;
  width: 100vw;
  height: 100vh;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
  padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}

【问题讨论】：

标签： ios angular progressive-web-apps

【解决方案1】：

我通过向touchmove 和touchforcechange 添加事件侦听器并使用{ passive: false } 选项解决了这个问题。

这是我的代码：

private _preventDefault = (e) => e.preventDefault();

private _disableScroll() {
    document.addEventListener('touchmove', this._preventDefault, { passive: false });
    document.addEventListener('touchforcechange', this._preventDefault, { passive: false });
}
private _enableScroll() {
    document.removeEventListener('touchmove', this._preventDefault, false);
    document.removeEventListener('touchforcechange', this._preventDefault, false);
}
onSearchFocus() {
    this.searchFocus.emit(true);
    this._disableScroll();
}
onSearchBlur() {
    this.searchBlur.emit(true);
    this._enableScroll();
}

【讨论】：