Preventing an element from scrolling the screen on iPhone?

Question

I have several <input type="number"> elements on my webpage. I'm using jQTouch, and I'm trying to stay fullscreen at all times; that is, horizontal scrolling is bad. Whenever I click an <input> element, the page scrolls right, showing a black border on the right of the screen and de-centering everything. The inputs are offset from the left of the screen, and they begin somewhere toward the middle of the page.

How can I prevent this scrolling on focus?

Answer 1

I just found the solution to this problem in this post Stop page scrolling from focus

Just add onFocus="window.scrollTo(0, 0);" to your input field and you're done! (Tried it with <textarea> and <input type="text" /> on the iPad, but I'm pretty sure it'll work on the iPhone too.)

I was afraid the scrolling would be visible as a flicker or something, but fortunately that is not the case!

Answer 2

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.

Answer 3

I would recommend using the jQuery.animate() method linked to above, not just the window.scrollTo(0,0), since iOS animates the page offset properties when an input element is focused. Calling window.scrollTo() just once may not work with the timing of this native animation.

For more background, iOS is animating the pageXOffset and pageYOffset properties of window. You can make a conditional check on these properties to respond if the window has shifted:

if(window.pageXOffset != 0 || window.pageYOffset != 0) {
  // handle window offset here
}

So, to expand on the aforementioned link, this would be a more complete example:

$('input,select').bind('focus',function(e) { 
  $('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow'); 
});

Answer 4

If the focus is being set programmatically, this is what I would do:

Save the window's scollTop value before changing the focus. Then restore the scrollTop to the saved value immediately after setting focus.

If using jQuery:

var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it

Answer 5

~2023 solution~

To prevent autoscroll, use translateY to briefly position the input element in the center of the screen, tricking the browser into thinking it doesn't need to scroll. Then immediately reset the position on focus.

This hinges on a rather strange event behavior: you can only fake the element position on mousedown, not touchstart or touchend. For some reason, touchstart and touchend have the wrong timing. mousedown does fire on touch in mobile Safari.

Tested in iOS 16.5.1.

• Demo: https://gsz8sg.csb.app/
• Source: https://codesandbox.io/s/prevent-autoscroll-ios-gsz8sg?file=/src/index.js

// To handle phone orientation change, update these to be dynamic.
// innerHeight - visualViewport.height gives the virtual keyboard height,
// but only when the keyboard is open.
const windowHeight = window.innerHeight;
const virtualKeyboardHeight = window.innerHeight / 2.85;

const preventAutoscroll = (el) => {
  // abort if input is already focused
  if (el === document.activeElement) return;

  // vertically position to the exact center of the screen
  // horizontally position off screen to avoid visual artifact
  const { height, y } = el.getBoundingClientRect();
  const yOffset = (windowHeight - virtualKeyboardHeight) / 2 - height / 2 - y;
  el.style.transform = `translate(-9999px, ${yOffset}px)`;
};

const preventAutoscrollCleanup = (el) => {
  el.style.transform = "";
};

// apply to all elements with the .prevent-autofocus class
[...document.getElementsByClassName("prevent-autofocus")].forEach((input) => {
  // neither touchstart nor touchend work (!)
  // mousedown fires in mobile safari before the autoscroll calculation
  input.addEventListener("mousedown", (e) => preventAutoscroll(e.target));
  input.addEventListener("focus", (e) => preventAutoscrollCleanup(e.target));
});

Answer 6

Try this, i think the problem is the zoom:

<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />