我有一个使用原生HTML，CSS和Javascript制作的移动的网站。每当移动的键盘打开/关闭时，当我点击一个<input>，该网站会自动向上/向下移动所有元素，在一个非常滞后的方式。请看我在下面制作的GIF：
<input>
为什么会导致这个如此滞后？
有没有人能建议一下有没有办法减少延迟？有没有办法检测到视口的变化，冻结元素，然后将它们重置到原始位置，而不自动向下渐变？
p1tboqfb1#
@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);文件：
element.scrollIntoView()
element.scrollIntoView(false);
jogvjijk2#
可以通过检测视口更改并手动应用布局更改来减少延迟并优化体验，而不是依赖于自动切换。为此，您可以使用JavaScript事件侦听器来侦听窗口大小调整、方向更改、或键盘显示/隐藏以检测视口中的变化并相应地更新布局。你也可以利用CSS媒体查询来根据不同的屏幕大小指定不同的布局。这样你的代码会更灵活，并针对不同类型的设备进行优化。
2条答案
按热度按时间p1tboqfb1#
@SunAwtCanvas，这是我的解决方案，使用@capacitor/keyboard来启用以下事件侦听器。首先，您可能希望侦听窗口事件：
基于这些条件，为了手动控制视口滚动到屏幕底部，您需要添加
element.scrollIntoView()方法，并为其提供“false”参数，如下所示：element.scrollIntoView(false);文件：
jogvjijk2#
可以通过检测视口更改并手动应用布局更改来减少延迟并优化体验，而不是依赖于自动切换。为此，您可以使用JavaScript事件侦听器来侦听窗口大小调整、方向更改、或键盘显示/隐藏以检测视口中的变化并相应地更新布局。你也可以利用CSS媒体查询来根据不同的屏幕大小指定不同的布局。这样你的代码会更灵活，并针对不同类型的设备进行优化。