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

Question

我是移动网络/开发人员的新手.我的应用程序使用jquery-mobile,phonegap和Compass(s​​css).

我的登录页面有问题:

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

当将焦点从登录字段切换到密码字段时,页面会向上滑动,这是我不想发生的.我希望我的徽标和字段保持原位,就像Skype iOS App登录页面一样.

这是发生了什么:

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

我现在正在考虑一种新策略,可能使用徽标和字段的顶部相对定位,以及捕捉焦点事件以自己滚动页面,在键盘上向上滑动(通过设置顶部相对定位坐标).

虽然这似乎可行,但我想知道这是否是Skype iOS App团队使用的那种工作......

欢迎对此特殊情况下使用的技术提出任何建议!

干杯,

弗雷德

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

Answer 2

我还没有测试过，但是 e.preventDefault() 能解决这个问题吗？通常，您使用 e.preventDefault() 来停止默认滚动/拖动行为。

$(document).bind('focus', function(e){
  e.preventDefault();
});

或更好

$(element).bind('focus', function(e){
  e.preventDefault();
});

或者

$(document).bind('touchstart', function(e){
  e.preventDefault();
});

输入字段会更好吗？

$(":input").live({
  focus: function(e) {
    e.preventDefault();
  }
});

Answer 3

我最终没有成功找到任何编码解决方案来解决我的问题，但我注意到手术定位允许我在字段之间切换时冻结屏幕。

整个登录屏幕的可用空间不得超过键盘可见后的可用空间，即 200 像素。此外，为了防止切换字段时滚动，最后输入字段中心位置最大不得超过 100 像素。使用 CSS 可以通过填充和边距来实现所需的结果。

应该可以通过删除键盘“字段导航栏”来获得额外的垂直空间，但我也不知道如何做到这一点：/