Window.Scrollto Not Working in Phonegap - Alternative Solution or Workaround

window.scrollTo not working in phonegap - alternative solution or workaround?

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
}

}

How to add vertical scroll in Phonegap

depending on how your app is set up there are a few options out there.

1) If you don't need a fixed header ( very rare but does happen ) you can use a normal css approach, phonegap is just a webview wrapped as a native app, so most things in a browser will work here.

2) if you need a fixed header and footer I suggest iScroll.

iOS 5 gave us -webkit-overflow-scrolling: touch, which works in mobile safari, BUT since a webview is mobile safari's little brother you aren't given all of the awesomeness that regular safari has.

window.scrollTo is not working in mobile phones

I got it finally working.

i had to use additionally the setTimeout function

setTimeout(window.scrollTo(x,y),100);

Prevent scrolling out of CordovaView in Cordova for Windows Phone 8

Two extra CSS properties on the body tag fixed the panning problem in both the standalone template app and in the original app I was working on:

body {
  overflow: hidden;
  -ms-content-zooming: none; }

This ms-content-zooming property does not restrict vertical scrolling within elements that are children of the body element.

How to fix an element after scroll in an AngularJS webpage

To fix your ul to the top when it hits the top of the page on scroll, you can put a directive on it that checks for the window's scrollTop() exceeding the ul element's offset top. When that occurs, the directive can just add a class to the element that fixes it to the top.

So your ul markup would look like this, with new directive set-class-when-at-top on it:

<ul class="nav nav-justified" set-class-when-at-top="fix-to-top">

That directive would add the CSS class fix-to-top to the element when the element hits the top of the page. The directive definition would look like this:

app.directive('setClassWhenAtTop', function ($window) {
  var $win = angular.element($window); // wrap window object as jQuery object

  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var topClass = attrs.setClassWhenAtTop, // get CSS class from directive's attribute value
          offsetTop = element.offset().top; // get element's offset top relative to document

      $win.on('scroll', function (e) {
        if ($win.scrollTop() >= offsetTop) {
          element.addClass(topClass);
        } else {
          element.removeClass(topClass);
        }
      });
    }
  };
});

If you wanted to get a bit cheeky, you could even reduce your scroll handler to just one line:

$win.on('scroll', function (e) {
  element[($win.scrollTop() >= offsetTop) ? 'addClass' : 'removeClass'](topClass);
});

And the fix-to-top CSS class would just be something like this:

.fix-to-top {
  position: fixed;
  top: 0;
}

Here's a fiddle.

How to add vertical scroll in Phonegap

depending on how your app is set up there are a few options out there.

1) If you don't need a fixed header ( very rare but does happen ) you can use a normal css approach, phonegap is just a webview wrapped as a native app, so most things in a browser will work here.

2) if you need a fixed header and footer I suggest iScroll.

iOS 5 gave us -webkit-overflow-scrolling: touch, which works in mobile safari, BUT since a webview is mobile safari's little brother you aren't given all of the awesomeness that regular safari has.

---

Related Topics