javascript - window.scrollTo 在 phonegap 中不起作用 - 替代解决方案或解决方法?

标签 javascript jquery css cordova

我编写了一个相当基本的 js 函数,它以编程方式自动将 iPhone 键盘完美对齐在每个输入字段下方(如果您喜欢,请随意使用它!)。对齐主要由 window.scroll 处理——一种适用于任何浏览器 View 的标准方法,但在 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 之外的所有东西都可以工作(注意,为了清楚起见,我们做了一些小的改变)。那么有人知道替代解决方案甚至是好的解决方法吗?

类似问题

window.scrollTo doesn't work in phonegap for IOS

PhoneGap / Cordova scrollTo Ignored

How to add vertical scroll in Phonegap

以上还有三个类似的问题,在某种程度上指出了正确的方向。其中一位回答者提到了使用 css 来实现这一点。任何人都可以想出一个更具体的例子吗? 另一个人建议使用 anchor ,但这不是一个非常好的解决方案,并且与我的其余代码配合得不好。

最佳答案

在做了一些研究之后,我意识到 window.scrollTo() 在 iOS6 和 phonegap 2.1 中确实可以工作,还有一些失败的东西;出于某种原因,document.height 没有在 UIwebView 中产生等比例的属性,因此我不得不编写一个小的解决方法。我将在下面发布解决方案和整个代码以供将来引用。

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
}

}

关于javascript - window.scrollTo 在 phonegap 中不起作用 - 替代解决方案或解决方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13796234/

相关文章:

javascript - CSS3 目标选择器问题

javascript - 视差滚动绑定(bind)动画,以不同的速度动画

jquery - JvectorMaps 的不同颜色标记

javascript - 如何获取指定类的每个输入的宽度

html - 文本框,将文本带到文本框中的下一行

javascript - Ajax 无法正确获取数据

javascript - JavaScript : loop through JSON

javascript - jQuery - 如果单击并再次单击,则更改表格单元格的颜色

html - 我的 CSS 样式表只有一个有效,而 DIV 背景图像无效?

CSS Flex 间距问题