移动键盘打开/关闭时滞后

Question

我有一个使用原生 HTML、CSS 和 Javascript 制作的移动网站。

每当我点击<input>时移动键盘打开/关闭时，该站点都会以非常滞后的方式自动向上/向下移动所有元素。

看看我在下面制作的这个 GIF：

为什么导致它如此滞后？

• 我的猜测是，每当网站更改视口时，它都必须移动很多导致延迟的元素。

如果有减少延迟的方法，有人可以请教吗？ 有没有办法检测视口变化，冻结元素然后将它们重置到原始位置而不自动逐渐向下移动？

Answer 1

@SunAwtCanvas，这是我使用@capacitor/keyboard 启用以下事件侦听器的解决方案。 首先，您可能想要收听窗口事件：

window.addEventListener('keyboardWillShow', () => {
  console.log("Keyboard will Show");
});
window.addEventListener('keyboardDidShow', () => {
  console.log("Keyboard is Shown");
});

基于这些条件，为了手动控制视口滚动到屏幕底部，您可以添加element.scrollIntoView()方法，为其提供“false”参数，如下所示： element.scrollIntoView(false);

文档：

1. 元素.scrollIntoView()

2. window.addEventListener('keyboardWillShow')

Answer 2

可以通过检测视口更改和手动应用布局更改而不是依赖自动移动来减少延迟并优化体验。 为此，您可以使用 JavaScript 事件侦听器来侦听窗口大小调整、方向更改或键盘显示/隐藏等事件，以检测视口中的更改并相应地更新布局。 您还可以利用 CSS 媒体查询根据不同的屏幕尺寸指定不同的布局。 这样您的代码将更加灵活并针对不同类型的设备进行优化。