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

Posted 2023-03-14

【中文标题】window.scrollTo 在 phonegap 中不起作用 - 替代解决方案或解决方法？

【英文标题】：window.scrollTo not working in phonegap - alternative solution or workaround?

【发布时间】：2012-12-10 06:46:45

【问题描述】：

我编写了一个相当基本的 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 之外的所有东西都可以工作（注意，为了清晰起见，做了一些小的改动）。那么有人知道替代解决方案甚至是好的解决方法吗？

类似问题

window.scrollTo doesn't work in phonegap for ios

PhoneGap / Cordova scrollTo Ignored

How to add vertical scroll in Phonegap

以上还有三个类似的问题，它们在某种程度上指出了一个正确的方向。其中一位回答者提到使用 css 来完成此操作。谁能想出一个更具体的例子？ 另一个人建议使用锚点，但这不是一个非常漂亮的解决方案，并且与我的其余代码配合得不是很好。

【参考方案1】：

在做了一些研究之后，我意识到 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

【参考方案2】：

你可以尝试使用 animate 和 scrollTop 属性来滚动它看起来像这样：

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

希望这会有所帮助。

【讨论】：

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

【参考方案3】：

你只需要使用这个：

$(window).scrollTop(0);