window.scrollTo不工作在phonegap - 替代解决方案或解决方法？ [英] window.scrollTo not working in phonegap - alternative solution or workaround?

问题描述

我编写了一个相当基本的js函数，可以自动地将iPhone键盘完美地对准每个输入字段下方的对象（如果你喜欢，可随意使用它） ！）。对齐方式主要由window.scroll处理 - 一种标准方法，可在任何浏览器视图中使用，但UIWebView中除外，因此 phonegap / cordova（2.1）。 所以我需要一个解决方法。

$ b

我的工作代码：

函数setKeyboardPos（tarId）{

//编程方式：设置滚动pos使键盘在文本字段下方完全对齐
var elVerticalDistance = $（＃+ tarId）.offset ]; //i.e。 287
var keyboardHeight = 158;
var heightOfView = document.height; // ie 444
var inputHeight = $（＃+ tarId）.outerHeight（）;

var viewPortSpace = heightOfView-keyboardHeight; //i.e。 180
var verticalNewSroll =（elVerticalDistance + inputHeight）-viewPortSpace;
if（verticalNewSroll< 0）{verticalNewSroll = 0; }
////

// OK，所有的操作都可以执行一些操作
$（＃footer）。 //隐藏页脚，以便键盘不会将它推到文本框的顶部
$（＃containingDiv）css（bottom，0px）; // remove foot space for footer
window.scrollTo（0，verticalNewSroll）; //滚动！问题开始的地方


}

在除了UIWebView之外的所有内容中，也就是。如上所述，除了window.scrollTo（NB为了清楚起见，有一些小的改动）。

类似问题

window.scrollTo不能在iOS的phonegap中使用

a>

PhoneGap / Cordova s​​crollTo忽略

a>

如何在Phonegap中添加垂直滚动

以上还有三个类似的问题，指向一个正确的方向。其中一个回答者提到使用CSS完成此操作。谁能想出一个更具体的例子？ 另一个人建议锚点，但这不是一个非常漂亮的解决方案，并不能很好地与我的代码的其余部分。

解决方案

做一些研究后，我意识到window.scrollTo（）实际上在iOS6中使用phonegap 2.1，有一些失败的东西;由于某种原因，document.height没有在UIwebView中产生等比例的属性，所以我不得不写一个小的解决方法。我将发布解决方案和下面的整个代码，供将来参考。

  function setKeyboardPos（tarId）{
 
 //程序化：设置滚动pos，使键盘完全在文本框下面对齐
 var elVerticalDistance = $（＃+ tarId）.offset（）[top]; 
 var keyboardHeight = 157; 
 
 if（isNativeApp（））{keyboardHeight = 261; } //为了简单起见，我选择更改键盘高度。显然，这个值不会影响键盘的实际高度，但是它的作用
 var keyboardTextfieldPadding = 2; 
 var heightOfView = document.height; 
 var inputHeight = $（＃+ tarId）.outerHeight（）; 
 
 var viewPortSpace = heightOfView-keyboardHeight-keyboardTextfieldPadding; // 180 
 var verticalNewSroll =（elVerticalDistance + inputHeight）-viewPortSpace; 
 if（verticalNewSroll< 0）{verticalNewSroll = 0; } 
 //// 
 
 // OK，所有的操作都可以执行一些操作
 $（＃footer）。 //隐藏页脚，以便键盘不会将它推到文本框的顶部
 $（＃containingDiv）css（bottom，0px）; // remove foot space for footer 
 window.scrollTo（0，verticalNewSroll）; //执行滚动！ 
 
} 
 
 function isNativeApp（）{
 
 var app =（document.URL.indexOf（'http：//'）=== -1）&& （document.URL.indexOf（'https：//'）=== -1）; 
 if（app）{
 return true; // PhoneGap native application 
} else {
 return false; // Web app / safari 
} 
 
} 
  

I've written a rather basic js function that programatically and automatically aligns the iPhone keyboard perfectly underneath each and every input field that gets focused (feel free to use it if you like it!). The alignment's primarily handled by window.scroll - a standard method that works in any browser view, except in UIWebView hence phonegap/cordova (2.1). So I need a workaround.

My working code:

function setKeyboardPos(tarId) {

//programmatically: set scroll pos so keyboard aligns perfectly underneath textfield
var elVerticalDistance = $("#"+tarId).offset()["top"]; //i.e. 287
var keyboardHeight = 158;
var heightOfView = document.height; // i.e. 444
var inputHeight = $("#"+tarId).outerHeight();

var viewPortSpace = heightOfView-keyboardHeight; //i.e. 180
var verticalNewSroll = (elVerticalDistance+inputHeight)-viewPortSpace;
if(verticalNewSroll<0) { verticalNewSroll = 0; }
////

    //OK, all done lets go ahead with some actions
    $("#footer").hide(); //hide footer so that the keyboard doesn't push it on top of textfield
    $("#containingDiv").css("bottom","0px"); //remove bottom space for footer
    window.scrollTo(0,verticalNewSroll); //scroll! where the problem starts


}

Working in everything but UIWebView, that is. As I mentioned above, everything works except the window.scrollTo (N.B. some minor changes have been made for the sake of clarity). So does anyone know of an alternative solution or even a good workaround?

Similar questions

window.scrollTo doesn't work in phonegap for IOS

PhoneGap / Cordova scrollTo Ignored

How to add vertical scroll in Phonegap

Above are furthermore three similar questions that somewhat points one in the right direction. One of the answerers mentions the use of css to accomplish this. Can anyone come up with a more concrete example? Another guy suggests anchors but that's not a very pretty solution and doesn't go very well with the rest of my code.

解决方案

After doing some research, I realized window.scrollTo() does actually work in iOS6 with phonegap 2.1, there was something else that failed; for some reason, document.height didn't yield a property of equal proportion within UIwebView so I had to write a small workaround. I'll post the solution and the entire code below for future reference.

function setKeyboardPos(tarId) {

//programmatically: set scroll pos so keyboard aligns perfectly underneath textfield
var elVerticalDistance = $("#"+tarId).offset()["top"];
var keyboardHeight = 157;

if(isNativeApp()) { keyboardHeight = 261; } //I choose to change the keyboard height for the sake of simplicity. Obviously, this value does not correnspond to the actual height of the keyboard but it does the trick
var keyboardTextfieldPadding = 2;
var heightOfView = document.height;
var inputHeight = $("#"+tarId).outerHeight();

var viewPortSpace = heightOfView-keyboardHeight-keyboardTextfieldPadding; //180
var verticalNewSroll = (elVerticalDistance+inputHeight)-viewPortSpace;
if(verticalNewSroll<0) { verticalNewSroll = 0; }
////

//OK, all done lets go ahead with some actions
$("#footer").hide(); //hide footer so that the keyboard doesn't push it on top of textfield
$("#containingDiv").css("bottom","0px"); //remove bottom space for footer
window.scrollTo(0,verticalNewSroll); // perform scroll!

}

function isNativeApp() {

var app = (document.URL.indexOf('http://') === -1) && (document.URL.indexOf('https://') === -1);
if (app) {
    return true; // PhoneGap native application
} else {
    return false; // Web app / safari
}

}

这篇关于window.scrollTo不工作在phonegap - 替代解决方案或解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！