防止页面在焦点切换时滚动

Question

我是移动网络/开发的新手。我的应用程序使用 jquery-mobile、phonegap 和 Compass (scss)。

我的登录页面有问题：

徽标和字段包含在标准“div”容器中 (data-role=“content” data-type=“vertical”)。背景是彩色的。

当将焦点从登录字段切换到密码字段时，页面向上滑动，这是我不希望发生的。我希望我的徽标和字段保留在原位，就像 Skype iOS 应用程序登录页面一样。

这是发生了什么：

我尝试了几种技巧，试图阻止滚动事件，或强制页面滚动到 0,0，但没有成功。

我现在正在考虑一种新策略，可能对徽标和字段使用顶部相对定位，并捕获焦点事件以自己滚动页面，在键盘上向上滑动（通过动画顶部相对定位坐标）。

虽然这看起来可行，但我想知道这是否是 Skype iOS 应用程序团队使用的那种解决方法……

欢迎就此特定案例中使用的技术提出任何建议！

干杯，

弗雷德

原文由 soleshoe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您想直接调用元素上的焦点并使用“preventScroll”选项。

el.focus({preventScroll: true});

 $('#el').focus((e) => {
  e.preventDefault();
  e.target.focus({preventScroll: true});
})

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

原文由 Gabriel Mahan 发布，翻译遵循 CC BY-SA 4.0 许可协议