Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 936
Stefan Kendall Avatar asked Jun 01 '10 19:06

Stefan Kendall


People also ask

How do you turn off scroll on iPhone?

Go to Settings and tap Accessibility. Turn on the feature, then use the slider to select a sensitivity level.

How do I disable scrolling in the background when the phone menu is open?

When the mobile menu is active (overlay) want to prevent that the body is scroll able, disable scroll for body.


1 Answers

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!

like image 155
Mischa Magyar Avatar answered Dec 24 '22 01:12

Mischa Magyar