CODEWITHSUNDEEP
iosangularprogressive-web-apps
Federico Ribero
Federico Ribero

Reputation: 309

iOS keyboard makes page scrollable - Angular PWA

Hello I have a page with a search input on it. when I focus on the input, the virtual keyboard shows up and makes the content of the page scrollable. I have tried many possible solutions from other questions on stackoverflow but those didn't work for me.

What I've tried is that when the page is scrollable and the user scrolls, I use the scrollTo(0,0) function in order to scroll back to the top.. this approach makes the app to start "blinking" while the user is dragging in order to scroll.

Is there other way to accomplish this ?

Host listener:

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

HTML and BODY styles:

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 */
}

Upvotes: 1

Views: 901

Answers (1)

Federico Ribero
Federico Ribero

Reputation: 309

I solved it by adding an event listener to touchmove and touchforcechange with the option { passive: false }.

Here is my code:

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();
}

Upvotes: 1

Related Questions