Vue solve the micro-channel browser input keyboard causes problems after closing vacancies bottom of the page

Cause:

Micro letter webview open when we h5 page, they fixed the height of the page, if the input at the bottom of the page, when evoking the soft keyboard, since the height issue, the whole webview is the keyboard top to go ,, but canceled when there is no Restore.

Solution

The first: After losing the focus automatically top

inputLoseFocus() {
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 100);
},

The second: the scrollTo back to the bottom

inputLoseFocus() {
  setTimeout(() => {
    const scrollHeight = document.documentElement.scrollHeight
      || document.body.scrollHeight;
    window.scrollTo({
      top: scrollHeight,
      behavior: 'smooth',
    });
  }, 100);
}

Third: calculate the height of the current input from the top of the page to scroll to the current location

inputLoseFocus() {
 console.log(`window.pageYOffset: ${window.pageYOffset}`);
  window.scrollTo({
    top: window.pageYOffset,
    behavior: 'smooth',
  });
}
We published 21 original articles · won praise 28 · views 4053

Guess you like

Origin blog.csdn.net/TanHao8/article/details/105372951