Preventing an <input> element from scrolling the screen on iPhone?

Question

I have several elements on my webpage. I\'m using jQTouch, and I\'m trying to stay fullscreen at all times; that is, horizontal sc

Answer 1

here is how I solved this on the iPhone (mobile Safari) (I used jQuery)

1) create a global variable that holds the current scroll position, and which is updated every time the user scrolls the viewport

var currentScrollPosition = 0;
$(document).scroll(function(){
    currentScrollPosition = $(this).scrollTop();
});

2) bind the focus event to the input field in question. when focused, have the document scroll to the current position

$(".input_selector").focus(function(){
    $(document).scrollTop(currentScrollPosition);
});

Ta Da! No annoying "scroll on focus"

One thing to keep in mind...make sure that the input field is ABOVE the keypad, else you will hide the field. That can be easily mitigated by adding an if-clause.