Window.scrollPour ne pas travailler dans phonegap – solution alternative ou solution de rechange?

J'ai écrit une fonction js assez simple qui aligne par programmation et automatiquement le clavier de l'iPhone parfaitement sous chaque champ de saisie qui se concentre ( n'hésitez pas à l'utiliser si vous l'aimez !). L'alignement est principalement traité par window.scroll: une méthode standard qui fonctionne dans n'importe quelle vue du navigateur, sauf dans UIWebView, par conséquent, phonegap / cordova (2.1) . J'ai donc besoin d'une solution de contournement .

Mon code de travail:

function setKeyboardPos(tarId) { //programmatically: set scroll pos so keyboard aligns perfectly underneath textfield var elVerticalDistance = $("#"+tarId).offset()["top"]; //ie 287 var keyboardHeight = 158; var heightOfView = document.height; // ie 444 var inputHeight = $("#"+tarId).outerHeight(); var viewPortSpace = heightOfView-keyboardHeight; //ie 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 }

Travailler dans tout sauf UIWebView, c'est-à-dire. Comme je l'ai mentionné ci-dessus, tout fonctionne à l'exception de window.scrollTo (NB, des modifications mineures ont été faites pour des raisons de clarté). Donc, quelqu'un sait-il une solution alternative ou même une bonne solution de contournement?

Questions similaires

Window.scrollTo ne fonctionne pas dans phonegap pour IOS

PhoneGap / Cordova scrollTo Ignoré

Comment ajouter un défilement vertical dans Phonegap

Ci-dessus, il y a en outre trois questions similaires qui font un certain point dans la bonne direction. L'un des répondants mentionne l'utilisation de css pour accomplir cela . Quelqu'un peut-il proposer un exemple plus concret? Un autre gars suggère des ancres, mais ce n'est pas une très jolie solution et ne va pas très bien avec le reste de mon code.

Après avoir fait des recherches, j'ai réalisé que window.scrollTo () fonctionne réellement dans iOS6 avec phonegap 2.1, il y avait autre chose qui a échoué; Pour une raison quelconque, document.height n'a pas cédé une propriété de proportion égale dans UIwebView, donc j'ai dû écrire une petite solution de contournement. Je publierai la solution et le code entier ci-dessous pour référence ultérieure.

 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 } }

Vous pouvez essayer d'utiliser la propriété animate et scrollTop pour faire défiler. Cela ressemble à quelque chose comme ceci:

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

J'espère que cela t'aides.

Il suffit d'utiliser ceci:

 $(window).scrollTop(0);