window.scrollTo在PhoneGap中无效 - 是否有替代方案或解决方法？

Question

我写了一个相当基础的js函数，可以自动程序化地使每个输入框在聚焦时完美地对齐iPhone键盘（如果你喜欢，可以使用它！）。对齐主要由window.scroll处理 - 这是一种标准方法，在任何浏览器视图中都有效，但在UIWebView中不起作用，因此需要一个解决方法(phonegap/cordova 2.1)。所以我需要一个解决方法。

我的工作代码:

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


}

在除了UIWebView之外的所有地方工作，也就是说。正如我上面提到的，除了window.scrollTo之外，一切都有效（注意：为了清晰起见做了一些小修改）。那么有人知道替代方案或者好的解决方法吗？

类似的问题

在iOS的phonegap中window.scrollTo不起作用

PhoneGap / Cordova scrollTo被忽略

如何在Phonegap中添加垂直滚动条

以上还有三个类似的问题，有点指向正确的方向。其中一个回答者提到使用CSS来完成这个任务。有没有人能提供更具体的例子呢？另一个人建议使用锚点，但这不是一个非常好的解决方案，也不能很好地与我的其他代码配合使用。

- Jonathan

Answer 1

经过一些研究，我意识到window.scrollTo()在使用phonegap 2.1的iOS6上确实有效，但还有其他一些问题。由于某种原因，在UIwebView中document.height未能产生相等比例的属性，因此我不得不编写一个小的解决方法。为了以后参考，我将在下面发布解决方案和整个代码。

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
}

}

- Jonathan

Answer 2

您可以尝试使用animate和scrollTop属性来滚动，代码大致如下：

$("html, body").animate({ scrollTop: "The value to scroll to" });

希望这能有所帮助。

- saraf

---

谢谢，但我刚刚意识到window.scrollTo()在这里（在iOS 6中！）确实起作用了，所以这实际上不是罪魁祸首。 - Jonathan

Answer 3

你只需要使用这个：

$(window).scrollTop(0);

- A. Magalhães