防止iPhone Web应用程序滚动输入字段的焦点

Question

When you click on an input field on a website in the iPhone Safari it automatically scrolls the content the way the input will be centered. I would like to prevent Safari of doing that and found several solutions, one of them: Preventing an <input> element from scrolling the screen on iPhone? where after focusing we use jQuery.animate() to move back where we were.

Unfortunately this only works as long as I call the website through Safari. As soon as I add the website to the homescreen, the automatic scrolling on a focus appears again. Now when I write the position of the body/html-element before and after correcting it (with the methode mentioned above) into the console everything seems as if it works correctly: The web-app think it has scrolled back to the place it should even if I haven't noticed anything visually.

Any suggestion?

Answer 1

Fixed the auto-centering on input click for me in React (JSX) with:

<input onMouseDown={ev => ev.preventDefault()} />

It should work with any way of attaching an event handler, eg addEventListener