iOS 页面滚动光标不跟随

[Dream4ever]

需求描述

编写的网页出现了一个小 bug，滚动页面时，input 元素中的光标没有随着元素一起移动。

方案调研

调研过程

先是 Google： js after scroll cursor position，没有找到有用的结果。

因为该问题只在 iOS 上出现，所以调整 Google 关键字为：js iOS cursor page scroll。在 Blinking caret/cursor doesn't scroll with it's Input text form element #178 中给出了解决方案：页面滚动前让元素失去焦点，滚动后恢复焦点。

继续搜索，这次尝试中文关键字：iOS 表单元素 页面滚动 光标，给出的结果和英文的一样，都是滚动前失去焦点，滚动后恢复焦点。

入选方案

• Blinking caret/cursor doesn't scroll with it's Input text form element #178

应用过程

示例代码：

let element = document.querySelector('#app');
element.blur();
element.scrollTop = 100;
element.focus();

要点总结

用对关键字也是很重要的搜索能力。