[英]Screen Scrolls while typing Using JQTouch in an Android PhoneGap app?
I have made an app using JQtouch, Jquery, and PhoneGap. 我已经使用JQtouch,Jquery和PhoneGap开发了一个应用程序。 When you type in a form's field, the entire page scrolls up or down each time you enter a character.
在表单字段中键入内容时,每次输入字符时,整个页面都会上下滚动。 I have searched everywhere for solutions but cannot find one.
我到处都在寻找解决方案,但找不到解决方案。 There was a similar problem here: https://github.com/jquery/jquery-mobile/issues/638 but his solution did not solve my issue.
这里也有类似的问题: https : //github.com/jquery/jquery-mobile/issues/638,但他的解决方案无法解决我的问题。
Does anyone have an idea why the page would scroll up and down with each added character in a textbox? 有谁知道为什么页面会随着文本框中的每个添加字符上下滚动? Because the page is so small, it scrolls up and down quickly making it very annoying.
由于页面太小,因此上下滚动很快,这很烦人。
Put the following CSS in your file after all other CSS styles: 将以下CSS放在所有其他CSS样式之后的文件中:
body {
-webkit-perspective: none;
-webkit-transform-style: flat;
}
body > * {
-webkit-backface-visibility: visible;
-webkit-transform: none;
}
This should solve your problem (at least it did for me). 这应该可以解决您的问题(至少对我有用)。
I'm using the new beta version (jqtouch-1.0-b4-rc), and with that I couldn't get these tricks to work on either Android 2.2 or 2.3. 我正在使用新的Beta版本(jqtouch-1.0-b4-rc),因此无法在Android 2.2或2.3上使用这些技巧。 In the end I fixed it by including in the following at the base of my CSS:
最后,我在CSS的基础上添加了以下内容来修复此问题:
#jqt ul li {
-webkit-transform: none;
position: relative; /* required to fix arrows */
}
#jqt ul li a {
-webkit-transform: none;
}
Try this in an init function called onload : 在一个名为onload的初始化函数中尝试一下:
function preventBehavior(e) { e.preventDefault(); 函数preventBehavior(e){e.preventDefault(); };
}; document.addEventListener("touchmove", preventBehavior, false);
document.addEventListener(“ touchmove”,preventBehavior,false);
More discussion at http://groups.google.com/group/phonegap/browse_thread/thread/739525b7531b6d29/ 有关更多讨论,请访问http://groups.google.com/group/phonegap/browse_thread/thread/739525b7531b6d29/
I faced the same issue on Android 2.2. 我在Android 2.2上也遇到了同样的问题。 I put the following properties in my CSS and then found that the issue had been resolved.
我在CSS中添加了以下属性,然后发现问题已解决。 What thing made the difference;
有什么不同? I don't know, but it is working for me:
我不知道,但是它对我有用:
html, body{overflow: hidden;}
Try this, it may work for you also. 试试这个,它也可能对您有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.