防止页面在焦点切换时滚动 [英] Preventing page from scrolling on focus switching

问题描述

我是移动网络/开发新手。我的应用程序正在使用jquery-mobile，phonegap和Compass（s​​css）。

我的登录页面出现问题：

$ b $标志和字段包含在标准的'div'容器中（data-role =contentdata-type =vertical）。背景是彩色的。

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

以下是发生的情况：

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

我正在考虑一个新策略现在，也许使用顶部相对位置标识和字段，并捕捉焦点事件以自己滚动页面，在键盘上滑动（通过动画设置顶部相对定位坐标）。

虽然这似乎是可行的，但我想知道这是Skype iOS App团队使用的一种工作方式......

对此特例中使用的技术有任何建议欢迎您！

欢呼声，

Fred

解决方案

我还没有测试过，但没有e.preventDefault（）s最重要的问题？通常您使用e.preventDefault（）来停止默认的滚动/拖动行为。

  $（document）.bind（'focus' ，函数（e）{
 e.preventDefault（）; 
}）; 
  

或更好

 < code $ $（element）.bind（'focus'，function（e）{
 e.preventDefault（）; 
}）; 
  

或

  $（document）.bind（'touchstart'，function（e）{
 e.preventDefault（）; 
}）; 
  

输入字段的效果会更好吗？

<$ （
e.preventDefault（）;
} $ b $（$ input）。live（{
focus：function（e）{
e.preventDefault b}）;

I am new to mobile web/dev. My app is using jquery-mobile, phonegap and Compass (scss).

I have a problem on my login page :

logo and fields are contained in standard 'div' containers (data-role="content" data-type="vertical"). Background is colored.

when switching focus from login field to password field, the page slides up, which is what I don-t want to occur. I would like my logo and fields to stay in place, just like the Skype iOS App login page.

here is what happens :

I have tried several tricks, trying to block scroll events, or forcing page to scroll to 0,0, without success.

I am thinking about a new strategy now, maybe using top relative positioning for logo and fields, and catching focus events to scroll the page myself, on keyboard slide up (by animating top relative positioning coordinates).

Though this seems doable, I am wondering if this is the kind of work around used by the Skype iOS App team...

Any advice on technics used in this particular case is welcome!

cheers,

Fred

解决方案

I haven't tested this yet, but does e.preventDefault() stop the issue? Generally you use e.preventDefault() to stop default scrolling / dragging behaviour.

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

or better

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

or

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

Would an input field work better?

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

这篇关于防止页面在焦点切换时滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！